Fitness Class Schedule and Booking
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.
Mobile Booking Screens
Mobile booking screens for appointments, travel, tickets and reservations with date and time pickers.
3 components
Restaurant Table Reservation Screen
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
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.
What are booking screens?
Booking screens let users choose a service, date and time or seat and confirm a reservation on a phone: salon and clinic appointments, restaurant tables, hotel stays, flights, events and classes.
When to use them
Use them in any app or mobile site where people reserve something, from fitness classes to travel.
Best practices
- Show availability before asking for details.
- Use horizontal date strips and large time slot buttons.
- Keep a summary with price visible before confirming.
- Send users to a clear confirmation screen with next steps.
Framework versions
Each screen is available in one of Bootstrap 6, Bootstrap 5, Tailwind CSS or pure CSS. The live preview opens at phone width; switch to tablet or desktop to see how the screen stays centred on larger displays. Copy the HTML, CSS and JavaScript or download the complete page, replace the sample data and connect it to your own API.