Hotel Homepage Template

A boutique hotel homepage template built with Bootstrap 6 for a fictional 24-room seaside hotel called Solenne.

How it works

Everything sits inside .sl-page, which pins data-bs-theme="light" and maps the Bootstrap 6 primary role to brass gold.

• Navbar: a transparent navbar lg:navbar-expand floats over the hero. Below 1024px the toggler opens a <dialog class="drawer drawer-end">. The script closes the drawer when an in-page link is clicked.
• Hero and booking bar: the .sl-hero background photo has a plum gradient over it. The #sl-book form contains a Datepicker set to multiple-ranged with two months, a select.form-control for guests, and a Combobox for the room. The script creates the Datepicker with Datepicker.getOrCreateInstance() and pre-selects a stay from 14 to 17 days after today, so the sample dates never go out of date. On submit it reads getSelectedDates(), counts the nights, multiplies them by the room's data-sl-rate and opens #sl-dialog with a summary.
• Rooms: horizontal card card-row cards. A btn-check radio group filters them by data-sl-view. "Choose room" selects the matching Combobox item and scrolls back to the booking bar.
• Amenities and reviews: a dark amenity grid, photo figure.sl-exp cards, .progress score bars and a carousel of quotes.
• Offer, FAQ, location: a signup form that uses data-bs-validate, an exclusive <details name="sl-faq"> accordion and a static SVG map in .sl-map, with no external embed.
• Dialog and toast: both forms flag invalid fields with .is-invalid, simulate the request with a spinner, then show #sl-toast through Toast.getOrCreateInstance().

Customization

• Change --sl-plum, --sl-gold and --sl-rose on .sl-page in style.css to rebrand. Update the --bs-primary-* overrides next to them so the buttons match.
• Set nightly prices with data-sl-rate on each Combobox .menu-item. The estimated total in the dialog uses that value.
• Change the default stay in script.js: the addDays(today, 14) and addDays(today, 17) calls set the arrival and departure dates.
• Replace the setTimeout inside simulate() with fetch() to your booking or newsletter endpoint.
• Add a room by copying a .sl-room-col block, setting data-sl-view to sea or garden, and adding a matching Combobox item.
• Recolor the date picker with the [data-vc="calendar"] rule in style.css.
• The photos are from Unsplash. Replace them with photos of your own property.

Accessibility

The page has a skip link, labelled forms, a toggler with aria-controls, aria-labelledby on the dialog and drawer. Carousel buttons have hidden text, the map is one role="img" with a description, and the toast uses role="status". Smooth scrolling and the image zoom are turned off under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1, so the alpha APIs can still change. Coming from Bootstrap 5: Modal is now Dialog, Offcanvas is now Drawer, Dropdown is now Menu, and form-select is gone (use form-control on <select>). The accordion is native <details>, and validation uses data-bs-validate. The Datepicker and Combobox components are new in Bootstrap 6. In alpha.1 every Combobox logs a harmless "more than one instance" console message.