Skip to content

Real Estate Agency Landing Page with Property Photos

Bootstrap 5 real estate landing page with a photo hero, property search that filters listing cards, saved homes, agent contacts and a valuation form.

Also known as: real estate landing page, property listing website, estate agent homepage, property search landing page

Bootstrap 5 Landing Pages Responsive #card #landing-page #real-estate #responsive #search

Real Estate Agency Landing Page with Property Photos live demo

Open in new tab

Bootstrap 5 code (HTML, CSS, JS)

A complete Bootstrap 5 landing page for a real estate agency: a dark green navbar over a full-width house photo, a property search card, featured listings with real photos, agent cards with phone and email links, and a "Thinking of selling?" valuation form.

How it works

Everything sits inside .rea-page. The .rea-header paints the hero photo from the --rea-hero-image custom property under a green gradient overlay. It holds a Bootstrap navbar that collapses into a toggler below lg, the headline, the .rea-search form and a .rea-stats row. The search form starts with .rea-deal, a pill switch made of btn-check radios (All, Buy, Rent), followed by Location, Property type and Bedrooms selects.

Listings live in .rea-grid. Each .rea-col carries data-deal, data-city, data-type and data-beds, and wraps an article.rea-card with a 10:7 photo, a .rea-tag (green for sale, gold .rea-tag--rent for rent), a .rea-fav save button and a .rea-facts list. The script runs on DOMContentLoaded for every .rea-page. applyFilters() reads the search form with FormData, hides non-matching columns, updates the .rea-count text and shows .rea-empty when nothing matches. Changing the Buy/Rent pill filters immediately; submitting the form also scrolls to #rea-listings. The save button toggles aria-pressed and a filled heart. The .rea-cta__form validates the email and shows a thank-you message after a short simulated delay.

The house and agent photos come from Unsplash; replace them with your own listings and team portraits.

Customization

  • --rea-hero-image in .rea-page: point it to your own hero photo.
  • --rea-green and --rea-gold in .rea-page: change the brand colors of buttons, tags, prices and the CTA panel.
  • --rea-serif in .rea-page: swap the Fraunces heading font for another family, or remove the Google Fonts link to fall back to Georgia.
  • data-deal, data-city, data-type and data-beds on each .rea-col: describe a new listing so the search can find it; add matching option values to the selects.
  • aspect-ratio: 10 / 7 in .rea-card__media img: crop listing photos taller or wider.
  • checked on the #rea-any radio: move it to #rea-buy to show only homes for sale on load.
  • The setTimeout in the .rea-cta__form submit handler: replace it with a fetch() call to your CRM.

Use cases

  • Real estate agencies: visitors filter listing cards by buy or rent, city, property type and bedrooms
  • Home sellers: a valuation form invites owners to request an estimate with an email address
  • Agent profiles: agent cards with phone and email links make it easy to contact the team
  • Property shortlists: shoppers save favorite homes with a heart button while browsing featured listings

Accessibility

The page uses header, nav, main and footer landmarks, and each section is labelled by its heading. The search fields have visible labels and the deal switch is a fieldset with a hidden legend, so it works with arrow keys like any radio group. The results count is a live region, save buttons expose aria-pressed and a property-specific aria-label, and the CTA error sets aria-invalid and moves focus back to the field. Links and buttons get a gold focus outline, the card lift and smooth scrolling are turned off under prefers-reduced-motion, and every photo has descriptive alt text.

Usage notes

This is a full-page template, so style.css sets the body background. Requires Bootstrap 5 with its bundle (navbar collapse) and Bootstrap Icons.

Real Estate Agency Landing Page with Property Photos at a glance

Framework
Bootstrap 5
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Bootstrap 5, Bootstrap Icons, fonts.googleapis.com
Layout
Responsive, works on mobile
Category
Landing Pages
License
Free for personal and commercial use

Questions about this template

Can I use the Real Estate Agency Landing Page with Property Photos code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 5 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  • <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  • <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&display=swap">
Real Estate Agency Landing Page with Property Photos – Bootstrap 5 landing pages component screenshot
Real Estate Agency Landing Page with Property Photos · Bootstrap 5 Landing Pages

More Landing Pages

Mobile App Landing Page – Bootstrap 5 landing pages preview

Mobile App Landing Page

Bootstrap 5 mobile app landing page with a CSS phone mockup, floating notification cards, store buttons, feature grid, steps and a gradient call to action.

Bootstrap 5 Landing Pages
SaaS Landing Page – Tailwind CSS landing pages preview

SaaS Landing Page

Complete Tailwind CSS SaaS landing page with dark hero, feature grid, monthly/yearly pricing switch, FAQ accordion and footer.

Tailwind CSS Landing Pages