Car Dealership Homepage Template

A complete Bootstrap 6 car dealership homepage for a fictional dealer, Halden Motors, with inventory search, filterable vehicle cards, a payment calculator, a pre-approval dialog, reviews and test drive booking.

How it works

Everything sits inside .hm-page (data-bs-theme="light"), which maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-control-checked-bg and friends) to the brand orange.

• Navbar: a dark navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> for mobile. "Inventory" opens a .menu whose items (data-hm-jump) pre-filter the car grid. The script syncs aria-expanded and closes the drawer after a link.
• Hero and search: a showroom photo, headline and offer badge. The overlapping .hm-search panel has btn-check condition pills, a searchable Combobox for the make, a body type select and a Range for max price; submitting filters the inventory.
• Inventory: six .hm-car cards with data-hm-body, data-hm-make, data-hm-cond, data-hm-price and data-hm-miles. .chip buttons filter by body type and .hm-sort re-orders the cards.
• Financing: two Range sliders, term radios and a credit select feed an amortization formula. "Get pre-approved" opens #hm-approve, a <dialog class="dialog"> with a validated form.
• Why us, reviews and FAQ: a feature grid, a dark review band and an exclusive <details name="hm-faq"> accordion.
• Test drive: <form data-bs-validate novalidate> with an input Datepicker; the script sets data-bs-date-min to tomorrow and data-bs-date-max six weeks ahead. A static SVG map shows the location.

Customization

• Change --hm-orange, --hm-ink and --hm-paper on .hm-page in style.css to rebrand. Update the --bs-primary-* lines next to them as well.
• Add vehicles by copying an .hm-car article and setting its data-hm-* attributes. The chips, search and sort pick it up automatically.
• Edit the <option value> APR rates in #hm-credit to match your lenders.
• Replace the setTimeout in the .hm-form and .hm-approve-form submit handlers with fetch() calls to your CRM or lead endpoint.
• Change the + 42 day offset in script.js to widen the booking window.
• Remove sections such as .hm-reviews or .hm-faq-wrap, together with their navbar links, for a shorter page.

The car and portrait photos come from Unsplash. Replace them with photos of your own stock and customers.

Accessibility

A skip link jumps to #hm-main. Chips use aria-pressed, the result count and payment are aria-live regions, the map is a labelled role="img", and invalid fields get .is-invalid and focus. Focus outlines are orange; hover lifts stop 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, and Dropdown is now Menu.
• Modal is now a native Dialog, and form-select is gone (use form-control on the select).
• Combobox, Datepicker, Range and Chips are new components.
• Validation uses data-bs-validate.
• The Combobox may log a harmless "more than one instance" warning in alpha.1.