Dental Clinic Homepage Template

A warm dental clinic homepage built with Bootstrap 6 for a fictional practice, Lumen Dental Studio. Cream, plum and mint colors, a soft serif headline and rounded shapes feel calm rather than clinical, ideal for family, cosmetic or orthodontic practices.

How it works

Everything lives in .ld-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role to plum and accent to mint, so buttons, btn-check labels, the switch and the range follow the brand.

• Navbar: a floating pill (.ld-nav) built from navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> on small screens. "Treatments" menu items carry data-ld-tab and open the matching tab via Tab.getOrCreateInstance().
• Hero: a large headline, calls to action and an arched Unsplash portrait with a mint .ld-blob, a rotated .ld-sticker badge and a .ld-review card.
• Treatments: nav nav-pills nav-pills-vertical tabs switch five .tab-pane panels. Buttons with data-ld-pick preselect the visit type in the booking form.
• Whitening preview: two copies of one photo in [data-ld-compare]. The Bootstrap 6 Range (.form-range) sets --ld-pos, which moves the clip-path of .ld-compare-before. The "before" tint is a CSS filter, so the preview is clearly simulated.
• Team, plans, reviews: portrait cards with chips, membership cards (.ld-plan-featured highlighted) and a scroll-snap carousel.
• Booking: btn-check treatment choices, an inline Datepicker (next 60 days, Sundays disabled, first open day preselected), time slots, name, email and a .switch. The .ld-summary panel updates live through [data-ld-out]. Submitting validates, shows a spinner, simulates the request and opens #ld-toast.
• FAQ and footer: an accordion-flush of <details name="ld-faq">, hours and an SVG .ld-map placeholder.

Customization

• Change --ld-plum, --ld-mint and --ld-cream in style.css (plus the --bs-primary-* / --bs-accent-* lines) to rebrand.
• Edit the LENGTHS object in script.js to change each treatment's estimated length.
• Change dateMax or vcpOptions: { disableWeekdays: [0] } in the Datepicker.getOrCreateInstance() call to set the booking window and closed days.
• Replace the setTimeout in the booking submit handler with fetch() to your scheduling system.
• Use real before and after photos in [data-ld-compare] and remove the filter on .ld-compare-before .ld-compare-img.
• Remove .ld-plan-featured from the Plus card to make all plans equal.
• Photos come from Unsplash; replace them with your own studio and team images.

Accessibility

A skip link jumps to #ld-main. Tabs use role="tab" with aria-selected, carousel slides are labelled groups, booking choices sit in fieldset/legend, the summary is an aria-live region and the toast uses role="status". The range has a hidden label, ratings and the map are labelled role="img", and smooth scrolling stops 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-primary replaces btn-primary, toggle buttons wrap the input in label.btn-check, the navbar uses a Drawer, Dropdown is Menu, the range is a .form-range wrapper, form-switch became .switch, and the accordion is native <details>. The script imports Datepicker, Drawer, Tab and Toast as an ES module.