GymLife

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

GymLife is a website template for gyms, fitness clubs and personal trainers, built on Bootstrap 5, with a dark layout and orange accents. The layout is responsive and mobile-ready and works in all popular web browsers. It comes with twelve pages: home, about, classes, class timetable, services, team, BMI calculator, gallery, blog, blog post, contact and a 404 page.

The home page has a full-screen hero slider, a features row, class cards, pricing plans, a photo gallery with a lightbox and a trainer carousel. The inner pages add a weekly class timetable with a filter by class type, a BMI calculator with a weight-status chart, skill bars and testimonials, service and team pages, a blog with a sidebar and comments, and a contact page with a working contact form and a map.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.4 and jQuery), compiled from the original Sass together with the theme and the Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero, trainer and testimonial sliders, PhotoSwipe replaces Magnific Popup in the gallery, and the off-canvas menu, skill bars and gallery grid no longer need plugins. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all thirteen pages together went from 16.9 MB and 434 requests to 6.1 MB and 197 requests. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the fold, and the home page preloads its hero photo.
• No third-party requests: Mulish and Oswald are self-hosted, the Font Awesome and Flaticon icon fonts are replaced by Lucide SVG icons and a small social-logo subset (the Twitter bird is now the X logo), the map loads OpenStreetMap only after a click, the gym 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.
• Working forms: the contact and comment forms send through php/send-email.php, with validation, a spam trap and an in-page message; the search sends visitors to the blog with their words, and the BMI calculator now works out the BMI and highlights the matching row of the chart. Before, none of the forms could send anything.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, real buttons for the menu, search and timetable filter, a Pages dropdown that opens from the keyboard, labelled fields and icon links, a visible focus ring, and text contrast of at least 4.5:1, with a deeper orange behind white button text.
• Fixes: the Classes links pointed to a page that did not exist, the 404 page covered the menu, the search button on the blog post page opened nothing, and the gallery and trainer layouts depended on scripts; sharper blog, class and about photos and fictional names and contact details throughout.