Build a Yoga Studio Website with the Canvas Yoga Demo

Canvas HTML Template shortcut that approach significantly: its dedicated yoga demo ships with every section a wellness business actually needs, pre-built and ready to customise.

What the Canvas Yoga Demo Actually Covers

Before committing to any template, audit what is genuinely present versus what appears only in marketing screenshots. The Canvas Yoga demo opens with a full-viewport Swiper hero built on the slider-element swiper_wrapper min-vh-100 class stack. That single class combination gives you a responsive, touch-enabled carousel that fills the screen on every device without a line of custom JavaScript.

Below the hero, the demo moves through a logical marketing funnel. A social-proof stat block surfaces three numbers that resonate with prospective members: 10 or more years of experience, 2,100 or more active members, and a promise of 30 or more yoga poses in the curriculum. All plain text, so you replace them with your studio’s real numbers in seconds. Further down, a class schedule section organises weekly timetable data in a scannable format, followed by a pricing table with the two most common studio tiers pre-labelled as Monthly Subscription ($19.99) and Annual Subscription ($219.99).

The demo also includes an instructor roster featuring five named teacher cards (Ruby Von Rails, Theodore Handle, Norman Gordon, Jason Response, and Abraham Pigeon) with placeholder portraits. If you need to understand how Canvas structures team sections more broadly, the post on Canvas Team Section Blocks for About Pages covers the full range of layout options available across the template.

Customising the Hero Slider

The hero block relies on Canvas’s bundled plugins.min.js to initialise Swiper. You do not import Swiper separately; it is already compiled into the plugin bundle. The slide markup follows this pattern:

<section class="slider-element swiper_wrapper min-vh-100">
  <div class="swiper-container">
    <div class="swiper-wrapper">

      <!-- Slide 1 -->
      <div class="swiper-slide"
           style="background-image: url('images/yoga/slide-1.jpg');">
        <div class="container d-flex align-items-center min-vh-100">
          <div class="col-md-6">
            <h2 class="display-4 fw-bold text-white">
              Yoga is the perfect opportunity<br>
              to be curious about who you are.
            </h2>
            <a href="#classes" class="btn btn-light btn-lg mt-4">
              Explore Classes
            </a>
          </div>
        </div>
      </div>

    </div>
    <div class="swiper-pagination"></div>
  </div>
</section>

The heading text in the demo, “Yoga is the perfect opportunity to be curious about who you are,” appears twice intentionally: once as the primary slide headline and once in a secondary content section. Replace both instances with your studio’s tagline to avoid duplicate-content issues. For a deeper look at carousel configuration options, see the guide on building a Bootstrap 5 image carousel with custom controls.

Wiring Up the Stats Section

The three counter blocks (“10+ Years Experienced”, “2100+ Members Active”, “1 Free Trial Class”) use Canvas’s built-in counter plugin, which triggers via the counter class and a data-from / data-to attribute pair. The animation fires when the element enters the viewport, keeping the interaction meaningful without any custom Intersection Observer code on your part.

<div class="col-md-4 text-center">
  <div class="counter font-weight-bold" data-from="0" data-to="2100">
    2100
  </div>
  <span class="text-muted">Members Active</span>
</div>

The post on Canvas Countdown and Counter Blocks for Launches and Stats documents every available data attribute if you need to adjust easing speed or separator characters for larger numbers.

Building the Pricing Table

The demo ships two pricing tiers. The structure below is the pattern Canvas uses; adapt the figure and feature list to match your studio’s actual offering:

<div class="row justify-content-center g-4">

  <!-- Monthly -->
  <div class="col-md-5">
    <div class="card border shadow-sm text-center p-4">
      <h3 class="fw-bold">Monthly Subscription</h3>
      <p class="display-5 fw-bold my-3">$19.99</p>
      <ul class="list-unstyled mb-4">
        <li>1 Free Class</li>
        <li>Free Diet Plan</li>
        <li>All Classes</li>
        <li>24x7 Available</li>
      </ul>
      <a href="#" class="btn btn-primary">Get Started</a>
    </div>
  </div>

  <!-- Annual -->
  <div class="col-md-5">
    <div class="card border shadow-sm text-center p-4 bg-light">
      <h3 class="fw-bold">Annual Subscription</h3>
      <p class="display-5 fw-bold my-3">$219.99</p>
      <ul class="list-unstyled mb-4">
        <li>1 Free Class</li>
        <li>Free Diet Plan</li>
        <li>All Classes</li>
        <li>24x7 Available</li>
      </ul>
      <a href="#" class="btn btn-dark">Get Started</a>
    </div>
  </div>

</div>

The feature list matches the four items the demo names exactly: “1 Free Class. Free Diet Plan. All Classes. 24×7 Available.” Keep those labels if they apply, or replace them without touching any JavaScript.

Applying Your Brand Colours

Canvas exposes its primary colour as the CSS variable --cnvs-themecolor. Add a single rule in your own stylesheet after Canvas’s compiled CSS and every button, link, and accent element updates at once:

<style>
  :root {
    --cnvs-themecolor: #6b8e72; / earthy sage green for wellness brands /
  }
</style>

For studios that want a deeper theming workflow, the comparison between SCSS and CSS variables for theming Bootstrap 5 lays out exactly when each approach makes more sense. For a yoga demo where speed matters and a single accent colour covers most decisions, the CSS variable route is the faster path.

Sections Worth Keeping and Sections to Cut

Not every yoga studio will need every block. Here is an honest assessment:

• Keep: The hero slider, the class schedule, the instructor cards, the pricing table, and the free trial CTA. These are the five sections prospective members look for first.
• Keep with edits: The “Classes in Natures” outdoor photography block. It works well for studios that teach outdoor or retreat sessions. Cut it if your studio is purely indoor.
• Consider cutting: The “Filtered Juices Per Day” lifestyle block unless your studio has an in-house juice bar or nutrition programme. Without that context it reads as padding.
• Consider cutting: The “Yoga For Beginners” explainer section if your brand targets advanced practitioners. Replace it with a workshop or intensive programme block instead.

The demo file (demo-yoga.html) has clean section boundaries, so removing a block means deleting the corresponding <section> element without breaking adjacent markup.

Deployment and Hosting

The demo produces a static HTML file. There is no database, no PHP, and no Node server to configure. The only login-gated feature in the demo is the “Login” button in the navigation, which links to whatever authentication URL you provide. You can host the finished site on Netlify, Vercel, GitHub Pages, or any CDN-backed static host with zero configuration. If you have not gone through that process before, the step-by-step walkthrough on deploying a Bootstrap 5 HTML template to Netlify in five minutes covers every step from drag-and-drop upload to custom domain assignment.

For studios weighing static HTML against a WordPress build, the practical breakdown in when to choose static HTML over WordPress in 2026 is worth reading before you commit. A yoga studio with a fixed class schedule and a simple booking link (Mindbody, Glofox, or an third-party embed) rarely needs the overhead of a WordPress installation.

Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.

If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.