Fitness class schedule app screen with day tabs, class cards showing time, coach and spots left, book and waitlist buttons, a booking sheet and a booked state.
Also known as: gym class booking app, fitness studio schedule ui, class timetable mobile, yoga class booking screen, workout class booking template
A fitness class schedule and booking screen built with Bootstrap 6: an HTML mobile template with seven day tabs, class type filters, class cards with time, coach and spots left, Book and Join waitlist buttons, a booking sheet and a booked state. Use this gym class booking UI for fitness, yoga and cycling studios or a gym membership PWA, and package it as a native app with Capacitor.
How it works
The root .fcs-app is a 430 px app column with the studio name and credits, sticky day tabs (.fcs-days), filter chips, the class list and a sticky bottom tab bar (.fcs-tabs).
Day tabs: script.js builds seven tabs starting today, so dates never go stale. Left/Right, Home and End move between days, and a dot marks days with a booking. The screen opens on today, or on tomorrow when fewer than two classes are left today.
Schedule data: CLASSES, TIMES and SPOTS_LEFT build a sample timetable per day. Classes that already started show Ended.
Cards: render() draws each .fcs-card with a spots meter (.fcs-meter-fill). Three or fewer spots turn orange (.is-low); a full class offers Join waitlist.
Booking: Book opens a Bootstrap 6 Drawer (#fcs-sheet). Confirm uses one credit, marks the card .is-booked and shows a Bootstrap 6 Toast. Tapping Booked opens the sheet in cancel mode (.is-cancel) and returns the credit.
Waitlist: Join waitlist shows your position; tap again to leave.
Filters: each .fcs-chip has a data-type and aria-pressed; .fcs-empty appears when nothing matches.
Customization
--fcs-purple and --fcs-purple-soft on .fcs-app: the accent for the selected day, meters and buttons (keep --bs-primary-bg in sync).
CLASSES in script.js: names, types, coaches, rooms, length, capacity and icon per class.
TIMES and SPOTS_LEFT: daily time slots and sample availability; replace both with data from your booking system.
START_CREDITS: the balance shown in .fcs-credits.
data-type on .fcs-chip: add or remove filters; the value must match a class type.
The click handler on .fcs-sheet-ok: add a fetch() call to your booking API.
Use cases
Gym and fitness studio apps: members see today's classes and book in two taps.
Yoga, Pilates and cycling studios: spots left and waitlists for popular classes.
Personal training and bootcamp sites: a weekly timetable with coaches.
Membership PWAs and Capacitor apps that use class credits.
Accessibility
Day tabs use aria-selected, a roving tabindex and full date labels. Every action button has an aria-label with the class name. Chips use aria-pressed, the credit count is aria-live and toasts use role="status". The sheet closes with Escape or the backdrop, focuses the confirm button on open and returns focus to the class button afterwards.
Bootstrap 6 notes
The sheet is a Bootstrap 6 Drawer (drawer drawer-bottom, replacing Offcanvas), toasts use Toast.getOrCreateInstance() from the ES module bundle, buttons use btn-solid, btn-outline and btn-subtle with theme-primary, and class types are badge badge-subtle theme-primary. Built on 6.0.0-alpha.1; alpha APIs can still change.
Can I use the Fitness Class Schedule and Booking code for free?
Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.
How do I add it to my website?
Load Bootstrap 6 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements).
Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag.
Download HTML gives you a complete page with everything already linked.
Does it need jQuery or a JavaScript framework?
No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.
Can I turn this screen into an iOS or Android app?
Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.
How does it look on a desktop screen?
The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.
Requirements
Add these to your page (already included in the download):
Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's
JavaScript load with type="module". Alpha releases can still change before the stable version.
Fitness Class Schedule and Booking · Bootstrap 6 Mobile Booking Screens
Restaurant table reservation screen with a party size stepper, date strip, lunch and dinner time chips, seating preference, a details sheet and a booking confirmation state.
Hotel booking details screen with a swipeable photo gallery, amenities, room options, a check-in and check-out date picker sheet and a reserve bar with the live total.
