Lotus
Lotus is a free, calm-and-elegant Bootstrap 5 website template designed for yoga studios and wellness centers. It ships with two hand-built pages — a rich single-page home and a dedicated schedule & booking page — covering class types, a working weekly timetable, membership pricing, teacher profiles, a gallery lightbox and validated trial and booking forms. Everything is built with vanilla JavaScript (no jQuery, no build step) and is responsive, accessible and progressively enhanced.
Key features
- Two complete pages: single-page home plus a full schedule and booking page
- Warm sand and oat neutral palette with one committed sage-green accent via CSS variables
- Interactive weekly schedule with accessible day tabs and a mobile-friendly card layout
- Membership pricing with a working monthly/annual toggle and a highlighted popular tier
- Vanilla, keyboard-accessible photo gallery lightbox
- Validated free-trial, booking and newsletter forms in pure vanilla JS
- Sticky navbar with a working mobile drawer, plus testimonials slider and count-up stats
- Progressive enhancement so all content stays visible with JavaScript disabled
- Self-hosted Bootstrap 5, no jQuery, no build tools, honours prefers-reduced-motion
Best for
- Yoga studios and wellness centers
- Pilates, barre and meditation studios
- Independent yoga and movement teachers
- Boutique fitness and mindfulness brands
- Retreat and holistic health businesses
At a glance
- Niche: Yoga studio / wellness center
- Pages: index.html, schedule.html
- Framework: Bootstrap 5 (self-hosted)
- JavaScript: Vanilla ES5-safe, one module per feature
- Fonts: Marcellus (display), Mulish (body)
- Accent: Sage green on warm sand/oat neutrals
- Accessibility: Semantic landmarks, ARIA widgets, keyboard support, visible focus
- License: Free for personal and commercial use
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
What is Lotus and who is it for?
Lotus is a website template built specifically for yoga studios, wellness centers and mindful-movement teachers. It gives a studio everything needed to present classes, schedules, memberships and teachers, and to turn visitors into members through free-trial and booking forms. The calm sand-and-sage design also suits Pilates, barre, meditation and retreat brands.
Which pages and sections are included?
There are two complete pages. The home page (index.html) includes a hero with a first-class-free tag, a class-types grid, a weekly schedule preview, membership pricing, teacher profiles, an about/philosophy block with amenities, a gallery with lightbox, a beginners free-trial form, a testimonials slider, a workshops strip, a location block and a newsletter. The schedule page (schedule.html) adds the full seven-day timetable, detailed class descriptions and a booking form.
Does Lotus use jQuery or a build step?
No. Lotus is built on Bootstrap 5 with 100% vanilla JavaScript and requires no build tools, package manager or compilation. You can open the HTML files directly or drop them onto any static host. Bootstrap's CSS and JS bundle are self-hosted in the css/vendor and js/vendor folders, so the template also works without a CDN.
Is the class schedule interactive?
Yes. The schedule uses accessible day tabs you can operate with a mouse or the keyboard (arrow keys, Home and End), and it defaults to a sensible day. Each row shows the time, class, teacher, level and remaining spots with colour-coded availability. On small screens the timetable reflows into readable cards, and with JavaScript disabled every day's classes remain fully visible.
How does the pricing toggle work?
The membership section has four tiers — Drop-in, Class Pack, Unlimited Monthly and Annual — with the Unlimited tier highlighted as the most popular. A monthly/annual toggle is wired up in vanilla JavaScript to swap the displayed price and billing note on the Unlimited card, communicating the annual saving without any page reload. You can edit the numbers directly in the HTML.
Is Lotus accessible and mobile friendly?
Yes. The template uses semantic landmarks, descriptive alt text on every image, ARIA roles on the custom tabs, lightbox and slider, visible focus styles and full keyboard support. It is mobile-first and fully responsive, the navbar collapses into a working drawer menu, and all motion respects the prefers-reduced-motion setting for visitors who prefer less animation.
Can I customise the colors and fonts?
Easily. The entire palette is defined as CSS custom properties at the top of css/style.css, so you can restyle the whole template by editing a handful of variables — for example swapping the sage accent for a dusty blue or soft ochre. Fonts are loaded from Google Fonts (Marcellus and Mulish) and can be changed in one link tag and one variable.
Is Lotus free to use commercially?
Yes. Lotus is free for both personal and commercial projects, including a real studio website or a client build. The images referenced in the template are placeholders you should replace with your own studio photography or properly licensed stock before going live.
