Bloom — Free Yoga & Wellness Studio Website Template
Bloom is a free one-page website template for yoga, meditation and wellness studios, built on Bootstrap 5 with zero jQuery. Its standout is an interactive day-by-day class schedule that opens on the current weekday, all wrapped in a plant-forward identity of forest green and sunrise gold on warm oat.
Key features
- Interactive Mon–Sun schedule tabs that open on the current weekday
- Six class-type cards with inline-SVG icons and level/duration tags
- Three-tier membership pricing with a highlighted "most loved" plan
- Sunrise-circle hero with floating class badge and circular teacher portraits
- Full-bleed retreat feature band with dates, location and price
- Vanilla-JS testimonial slider: dots, arrows, autoplay, pause-on-hover
- Front-end validated "first class free" form with inline success message
- Sticky blur-on-scroll header and IntersectionObserver scroll reveals
- Accessible: skip link, ARIA tab roles, visible focus, reduced-motion support
Best for
- Yoga, meditation and breathwork studios
- Wellness and mindfulness retreats
- Small studios selling class memberships
- Freelancers building a single-page studio site
- Teachers launching a first-class-free offer
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 — 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
Is Bloom really free, including commercial use?
Yes. Bloom is completely free for both personal and commercial projects, including paid client work, so you can launch a real yoga, meditation or wellness studio site at no cost. A credit link back to uiCookies is appreciated but never required.
Does it use jQuery or any paid plugins?
No. Every interaction — the mobile nav, the day-tab schedule, the testimonial slider, form validation and scroll reveals — is hand-written vanilla JavaScript. The only bundled library is Bootstrap 5, which is self-hosted, and all icons are inline SVG, so there are no paid plugins or heavy dependencies to license.
Can I edit it without a build tool or coding?
Yes. Bloom is a static front-end of plain HTML, CSS and JavaScript with no build step, bundler or framework to install. Open the files in any code editor, change the text and images directly, and refresh the page to see your edits. Basic HTML knowledge helps, but you don't need Node, npm or a compiler.
How do I change the colours and fonts?
The colour scheme — forest green, sunrise gold and warm oat — is defined as CSS custom properties near the top of the main stylesheet, so you can rebrand the whole site by editing a handful of values. The display typeface is Cormorant Garamond, loaded via a Google Fonts link in the page head; swap that link and the font-family to use your own type.
Is it responsive and mobile-friendly?
Yes. The layout is fully responsive and built on Bootstrap 5's grid, so it adapts cleanly from large desktops down to phones. The navigation collapses into a vanilla-JS mobile menu, and the schedule tabs, pricing tiers and class cards reflow neatly for smaller screens.
Which browsers does it support?
Bloom works in all current versions of Chrome, Firefox, Safari and Edge. It relies on modern standards like CSS custom properties, flexbox, grid and IntersectionObserver, which are supported across today's evergreen browsers. It is not built to support Internet Explorer.
How does the interactive class schedule work, and can I edit it?
The weekly schedule uses a row of day tabs from Monday to Sunday, each revealing a panel of classes with time, class name, teacher and level. It automatically opens on the current weekday when the page loads, and the tabs are keyboard-navigable with proper ARIA roles for accessibility. To edit it, change the text inside each .day-panel in place, or duplicate a .sched-row to add a class — the tabs keep working with no JavaScript changes.
Can I connect the free-class form to my mailing list?
The "first class free" capture form validates on the front end and shows an inline confirmation message out of the box, but it does not process or store submissions on its own. Point its action attribute at your own endpoint, Mailchimp, or a form service like Formspree to start collecting real sign-ups. Since Bloom is a static template, there is no backend or payment processing included.
