Yogalife

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Yogalife is a website template for yoga studios, meditation centres and wellness instructors, built on Bootstrap 5, with a light, airy design. The layout is responsive and mobile-ready and works in all popular web browsers. It comes with five pages: home, classes, events, about and contact.

The home page has a full-screen hero slider, a welcome section, program cards, a video section, pricing tables, a full-width photo gallery with a lightbox, an events slider and a testimonial slider. The inner pages add a class schedule with times, instructors and enrol buttons, event cards, trainer profiles and a contact page with a working contact form, and the page headers scroll with a parallax effect. Yogalife gives you a ready-made site to present your studio, its classes and its teachers.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass together with the theme and the original Bootstrap 4 proportions and colours, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero, events and testimonial sliders, PhotoSwipe replaces Magnific Popup in the gallery, Jarallax replaces Stellar on the page headers, a keyboard-operable dialog replaces the off-canvas mobile menu, and a small built-in module replaces AOS. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all five pages together went from 10.0 MB and 194 requests to 3.3 MB and 91 requests, and the download from 3.1 MB to 2.5 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the hero, each page preloads its hero photo, and unused plugins such as jQuery UI, Slick, a countdown, a date picker, MediaElement and animate.css are gone.
• No third-party requests: Playfair Display and Work Sans are self-hosted, the IcoMoon and Flaticon icon fonts are replaced by Lucide SVG icons and a 1.1 KB social-logo subset (the Twitter bird is now the X logo), the studio video is a stock clip that loads from YouTube’s privacy-enhanced player only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its web fonts from Google Fonts and a stylesheet from jsDelivr.
• Working contact form: the form on the contact page sends through php/send-email.php, with validation, a spam trap and an in-page message. Before, it had no action and three of its four fields had no name, so nothing could be sent.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a real menu button, a mobile menu that keeps keyboard focus inside and closes with Esc, submenus that open from the keyboard (they opened on hover only), hero slider arrows that work from the keyboard, names on icon-only links, descriptive alt text, visible focus rings, reduced-motion support and WCAG AA text contrast, with dark text on the cyan buttons and the trial pricing card, a darker cyan for cyan text, darker body, date and footer greys, and slider arrows and dots that are easy to see.
• Fixed: the home page scrolled sideways at every screen width (a gallery row sat outside its container, and a photo stuck out on phones), the photo-and-text blocks on the home and classes pages squeezed the text into a narrow column on phones and tablets (they now stack), the play links on the event cards opened an empty video window (they are plain links now), and a script saved with the old demo failed to load on every page.
• Demo content: fictional trainer and instructor names, a “Programs” footer column, current event dates and placeholder contact details, and six photos with visible brand markings on mats, sportswear and a shop window are replaced with Unsplash photos without brand markings.