Auto Repair Shop Homepage Template

A complete Bootstrap 6 auto repair shop homepage for a fictional garage, Gearline Auto Care, with service price tabs, a booking form with live estimate and calendar, a repair tracker, reviews and FAQ.

How it works

The page lives in .ga-page (data-bs-theme="light"), which maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-focus-ring and friends) to safety yellow.

• Navbar: a white navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> on mobile. "Services" opens a .menu.
• Hero: navy headline block with quick price links, a workshop photo with a "Live bay status" card (.progress bars), a warranty seal and a yellow .ga-strip of promises.
• Services: nav nav-underline tabs switch three .tab-pane panels with a .ga-price-list each.
• How it works: a four-step stepper md:stepper-horizontal inside a .contains-inline wrapper.
• Booking: <form class="ga-book" data-bs-validate novalidate> is split into four fieldset.ga-block steps: a searchable Combobox for the make, btn-check service checkboxes with data-ga-price, an inline Datepicker created with Datepicker.getOrCreateInstance() (tomorrow to 30 days ahead), time slots and contact fields. The .ga-summary sidebar shows the vehicle, drop-off and total; on submit the script validates, simulates the request and shows #ga-toast.
• Reviews: a Bootstrap 6 carousel with custom controls.
• Repair tracker: #ga-track is a <dialog class="dialog"> with an OtpInput (data-bs-otp). Any complete 6-digit code reveals a demo status stepper.
• FAQ, CTA and footer: a <details name="ga-faq"> accordion, a towing call-out, opening hours and an SVG map.

Customization

• Change --ga-navy and --ga-yellow on .ga-page in style.css to rebrand, and keep the --bs-primary-* overrides in step.
• Add a service by copying a label in [data-ga-services] and setting its data-ga-price. The summary total updates automatically.
• Change the + 30 day offset in script.js to widen the booking window.
• Replace the setTimeout in the .ga-book submit handler with fetch() to your booking system.
• In the .ga-otp handler, swap the demo result for a real fetch() to your job API.
• Adjust the .ga-w80 / .ga-w45 widths, or drive them from live data, to update the bay status bars.

The photos come from Unsplash. Replace them with pictures of your own workshop and customers.

Accessibility

A skip link jumps to #ga-main. Tabs use role="tab", progress bars role="progressbar", time slots a role="radiogroup"; the summary and tracker result are live regions. Invalid fields receive focus, outlines are a yellow ring, and smooth scrolling stops under prefers-reduced-motion.

Bootstrap 6 notes

This page is built on Bootstrap 6.0.0-alpha.1, and alpha APIs can still change. Coming from Bootstrap 5:

• btn-solid theme-primary replaces btn-primary.
• The navbar uses Drawer instead of navbar-collapse, Dropdown is now Menu, and Modal is now a native Dialog.
• Accordions are native <details>.
• Combobox, Datepicker, OtpInput and Stepper are new.
• Validation uses data-bs-validate.
• The Combobox may log a harmless "more than one instance" warning in alpha.1.