A warm, light Bootstrap 6 homepage template for a veterinary clinic, built for a fictional practice called Willow & Paw, with live opening status, filterable prices, a first-visit stepper, the vet team, reviews and an appointment form.
How it works
Everything sits inside .wp-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast, --bs-control-checked-bg) to forest green, so every btn-solid theme-primary, chip and badge uses the brand color.
- Top bar: the script compares the visitor's clock with the
HOURSarray inscript.jsand writes "Open now" or "Closed now" into[data-wp-status]. When closed it adds.wp-closedto the root (orange dot). - Navbar:
navbar lg:navbar-expandwith a<dialog class="drawer drawer-end">for mobile. "Services" opens a Bootstrap 6.menuwithmenu-item-iconandmenu-item-description. The script syncsaria-expandedand closes the drawer after a link. - Hero: a serif headline,
chiptags, an arched photo collage and.wp-slot-card, whose[data-wp-slot]text ("Tomorrow, 8:20 AM") is computed from the hours. - Services: a
btn-groupofbtn-checkradio labels filters the six service cards by theirdata-wp-petsattribute. - First visit: a Bootstrap 6
stepperinside.contains-inline, horizontal from thesm:container width. - Booking form:
<form data-bs-validate novalidate>with a Combobox (data-bs-name="species"), a native<select class="form-control">, a Datepicker limited to the next 60 days, and time-of-day radio buttons. On submit the script also checks the combobox and radios, simulates the request and opens#wp-toast. - FAQ: an exclusive accordion of
<details name="wp-faq">items.
Customization
- Change
--wp-forest,--wp-orangeand--wp-creamin.wp-page(style.css). Update the--bs-primary-*lines beside them so buttons and checks follow. - Edit the
HOURSarray inscript.jsto set your opening hours. The status line and next-slot card use it. - Add or remove service cards and list the animals in each
data-wp-petsvalue (dog,cat,small). - Change the 60-day window where the script sets
data-bs-date-maxon#wp-date. - Replace the
setTimeoutin the submit handler withfetch()to your booking endpoint. - The photos come from Unsplash. Replace them with photos of your own clinic, team and patients.
Accessibility
A skip link jumps to #wp-main. The toggler has aria-controls and an aria-label. The time options are grouped in a fieldset with a legend, error messages appear next to their fields, and the first invalid field gets focus. The toast uses role="status", focus rings are clearly visible and hover motion stops under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Bootstrap 5 developers will notice that btn-solid theme-primary replaces btn btn-primary, the navbar opens a Drawer instead of navbar-collapse, and Menu replaces Dropdown. The accordion is native <details>, and validation uses data-bs-validate instead of needs-validation. Combobox, Datepicker, Chips and Stepper are new Bootstrap 6 components. The selected Combobox value stays after the form resets, because the alpha has no reset method.
