Bloom — Free Yoga & Wellness Studio Website Template
Bloom trades the usual spa beige-and-terracotta for a grounded, plant-forward identity: deep forest greens and a single sunrise-gold accent on warm oat, with a signature "rising sun" circle motif. It ships as a complete one-page studio site — an interactive day-by-day class schedule, class-type cards, a teacher row, membership pricing and a retreat feature — built on Bootstrap 5 with zero jQuery.
Features
- Interactive weekly schedule with day tabs (Mon–Sun), keyboard-navigable, that opens on the current weekday automatically
- Six class-type cards (Vinyasa, Hatha, Yin, Meditation, Breathwork, Prenatal) with inline-SVG icons and level/duration tags
- Signature sunrise-circle hero with floating class badge, plus circular instructor portraits
- Three-tier membership pricing (drop-in, unlimited, annual) with a highlighted "most loved" plan
- Full-bleed retreat feature band with dates, location and price metadata
- Vanilla-JS testimonial slider with dots, arrows, autoplay and pause-on-hover/focus
- Front-end validated "first class free" capture form with inline success message
- Scroll-reveal via IntersectionObserver, sticky blur-on-scroll header, and full prefers-reduced-motion support
- Semantic landmarks, skip link, ARIA roles on tabs, visible focus styles and alt text throughout
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Grounded yoga studio — forest green + sunrise gold on warm oat, Cormorant Garamond display
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Bloom really free to use commercially?
Yes. Use it for a real yoga, meditation or wellness studio, including client work, at no cost. A credit link back to uiCookies is appreciated but not required.
Does it use jQuery or any paid plugins?
No. Every interaction — the mobile nav, day-tab schedule, testimonial slider, form validation and scroll reveals — is hand-written vanilla JavaScript. The only bundled library is Bootstrap 5, self-hosted, and all icons are inline SVG.
How do I edit the class schedule?
Each day is a `.day-panel` block containing rows of time, class name, teacher and level. Edit the text in place, duplicate a `.sched-row` to add a class, and the day tabs will keep working with no JavaScript changes.
Can I connect the free-class form to my mailing list?
The form validates on the front end and shows a confirmation message out of the box. Point its `action` at your own endpoint, Mailchimp, or a form service to start collecting real sign-ups.
