Real Estate Homepage Template

A real estate agency homepage template built with Bootstrap 6 for a fictional agency called Keyline Estates. It covers a split hero with property search, filterable listings, neighborhood guides, a mortgage calculator, agents, client reviews and a valuation request form.

How it works

The page lives in .kl-page, which pins data-bs-theme="light" and maps the Bootstrap 6 primary role to coral with dark ink text.

Navbar: navbar lg:navbar-expand sticky-top with a <dialog class="drawer drawer-end"> on small screens. The "Buy" link opens a .menu with icons and descriptions, and the drawer closes when an in-page link is clicked.
Hero search: a btn-check radio group switches between Buy and Rent. The "Location" field is a searchable Combobox (data-bs-search="true"), and Type and Max price are select.form-control fields. Switching modes rebuilds the price options from the JSON in data-kl-sale / data-kl-rent. The floating "Open house" card shows next Saturday's date, worked out in script.js.
Listings: each .kl-card has data-kl-mode, data-kl-type, data-kl-area and data-kl-price. The search form, the .chip type filters and the neighborhood tiles all update one filter state. A polite live region reports the count, and an empty state with "Clear filters" appears when nothing matches. Heart buttons use data-bs-toggle="button", and the script swaps the icon and updates the "Saved" badge.
How we work: a stepper md:stepper-horizontal inside .contains-inline.
Mortgage calculator: three Bootstrap 6 Range sliders (.form-range + .form-range-input) and a term radio group. The calc() function computes the monthly payment.
Valuation form: data-bs-validate gives CSS-only validation. On submit the script marks invalid fields with .is-invalid, otherwise it shows a spinner, simulates the request and opens #kl-toast with Toast.getOrCreateInstance().

Customization

Change --kl-ink, --kl-coral and --kl-sun on .kl-page in style.css to rebrand, and update the --bs-primary-* overrides next to them.
Add a listing by copying a .kl-card. Set its data-kl-* attributes so the filters pick it up.
Change the price brackets in the data-kl-sale and data-kl-rent attributes on #kl-max.
Set the calculator defaults with the value, min and max attributes on #kl-price, #kl-down and #kl-rate.
Replace the setTimeout in the valuation submit handler with fetch() to your CRM or lead endpoint.
Change grid-template-rows in .kl-area-grid to resize the neighborhood mosaic, or remove .kl-area-wide for equal tiles.
The photos are from Unsplash. Replace them with your own listings and agent portraits.

Accessibility

The page has a skip link, labels on every field, aria-pressed on the chips and save buttons, aria-live on the result count and the payment total, and role="status" on the toast. Card lifts, image zoom and smooth scrolling 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: navbar-collapse becomes a Drawer, Dropdown is now Menu, form-select is gone, and range inputs need the .form-range wrapper. Combobox, Chips, Range and Stepper are new in Bootstrap 6. In alpha.1 every Combobox logs a harmless "more than one instance" console message.