Medical Clinic Homepage Template

A light, trustworthy medical clinic homepage built with Bootstrap 6 for a fictional practice, Northside Health Clinic: services, doctors, booking steps, insurance, reviews, FAQ, location and an appointment dialog.

How it works

The page lives in .nh-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role to navy and accent to coral, so every btn-solid theme-accent, badge and stepper dot follows the brand.

• Navbar: a slim .nh-topbar, then navbar lg:navbar-expand with a <dialog class="drawer drawer-end">. "Services" opens a .menu; the script closes the drawer after a link is chosen.
• Hero: headline, calls to action and an Unsplash photo with floating .nh-float cards. The "next same-day slot" label is computed from the current hour.
• Quick booking bar (.nh-quick): a Combobox (data-bs-name="department"), a Datepicker limited to the next 60 days and a btn-check radio group. Submitting opens #nh-book prefilled.
• Services: six .nh-service cards; telehealth uses .nh-service-dark.
• Doctors: .chip buttons with data-nh-filter hide non-matching .nh-doc-col cards. "Next opening" labels come from data-nh-next (days from today, skipping Sundays), and buttons with data-nh-doctor prefill the dialog.
• Steps, insurance, reviews, FAQ: stepper md:stepper-horizontal inside .contains-inline, stat tiles, quote cards, an exclusive <details name="nh-faq"> accordion and an SVG .nh-map placeholder with hours.
• Booking dialog: <form data-bs-validate novalidate> in <dialog class="dialog dialog-lg">. Invalid fields get .is-invalid; a valid form shows a spinner, simulates the request and shows #nh-toast.

Customization

• Change --nh-navy and --nh-coral in style.css (plus the --bs-primary-* / --bs-accent-* lines) to rebrand.
• Edit data-nh-next on each doctor card to set the next opening.
• Add a doctor by copying a .nh-doc-col with a data-nh-specialty that matches a data-nh-filter chip.
• Edit the menu-item buttons with data-bs-value to change departments.
• Replace the setTimeout in the .nh-book-form submit handler with fetch() to your scheduling endpoint.
• Change dateMax in the Datepicker.getOrCreateInstance() call to allow booking further ahead.
• Photos come from Unsplash; replace them with your own clinic and staff photos.

Accessibility

A skip link jumps to #nh-main. Filter chips expose aria-pressed and announce the count in a live region, ratings and the map are labelled role="img", every control has a label, the first invalid field gets focus and the toast uses role="status". Hover lift and smooth scrolling stop under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Versus Bootstrap 5: btn-solid theme-accent replaces btn-primary, the navbar uses a Drawer instead of navbar-collapse, Dropdown became Menu, Modal became Dialog, form-select is form-control on a <select>, checkboxes are .check, and the accordion is native <details>. Combobox, Datepicker, Chips and Stepper are new. The script imports Datepicker, Dialog, Drawer and Toast as an ES module. The alpha Combobox logs a harmless "more than one instance" console message.