Wedding Planner Homepage Template

A romantic, light Bootstrap 6 homepage template for a wedding planning studio: navbar, arched photo hero, packages, planning stepper, filterable gallery with lightbox, reviews, FAQ and inquiry form.

How it works

Everything sits in .jw-page, which pins data-bs-theme="light" and re-maps the primary role (--bs-primary-bg, --bs-control-checked-bg and friends) to the brand rose.

• Top bar and navbar: the script fills [data-jw-seasons] with the next two years, so "now booking" never goes stale. The navbar lg:navbar-expand uses a <dialog class="drawer drawer-start"> below 1024px and a .menu for "Journal"; the script syncs aria-expanded on .jw-toggler.
• Hero: serif headline, stats, the arched .jw-arch photo, a round .jw-round photo and an avatar-stack proof card.
• Services: three card packages; .jw-plan-featured is the dark "Most booked" card. Each data-jw-pick link pre-selects that service in the inquiry combobox.
• Process: a Bootstrap 6 stepper inside .contains-inline, with the finished steps marked active.
• Gallery: a radio btn-group of btn-check labels filters .jw-shot tiles by data-jw-cat. Clicking a tile opens #jw-lightbox, a <dialog class="dialog dialog-lg"> whose data-jw-step buttons cycle through the visible photos.
• Reviews and FAQ: a Bootstrap 6 carousel with indicators and buttons, and an exclusive accordion of <details name="jw-faq">.
• Inquiry: <form data-bs-validate novalidate> with a Datepicker (#jw-date, limited to dates 30 days to three years ahead), a Combobox for the service, a form-range guest slider with data-bs-bubble and a required .check. Submit flags invalid fields with .is-invalid, then shows a spinner and the .jw-success alert.

Customization

• Change --jw-rose, --jw-sage and --jw-ivory in .jw-page (style.css) to rebrand; update the --bs-primary-* overrides next to them.
• Swap fonts by editing --jw-serif and --jw-sans and the Google Fonts URL.
• Add or remove gallery photos: each .jw-shot needs data-jw-cat and data-jw-caption; .jw-shot-tall and .jw-shot-wide control the mosaic.
• Change the dateMin / dateMax values passed to Datepicker.getOrCreateInstance() in script.js.
• Replace the setTimeout in the submit handler with fetch() to your inquiry endpoint.
• The photos come from Unsplash; replace them with your own wedding photography.

Accessibility

A skip link jumps to #jw-main. The toggler has aria-controls and an updated aria-expanded, the gallery tiles are real buttons with descriptive alt text, the filter result is read by a polite live region, and the lightbox is a native modal dialog with a labelled title. The carousel uses aria-roledescription, the success alert uses role="status" and receives focus. Hover zoom is disabled under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1, so alpha APIs can still change. Compared with Bootstrap 5: btn-solid theme-primary replaces btn-primary, the navbar uses a Drawer instead of navbar-collapse, Dropdown is Menu, Modal is Dialog, the accordion is native <details> and validation uses data-bs-validate. Datepicker, Combobox, Range and Stepper are new Bootstrap 6 components. The Combobox keeps its choice after the form resets.