Cornerstone
Cornerstone is a free, premium Bootstrap 5 website template for residential property management companies that serve both owners and renters. It ships with a conversion-focused home page and a filterable property listings page, built with vanilla JavaScript and no jQuery. The design uses a trustworthy deep forest-green and gold palette with a Fraunces display serif for an established, corporate real-estate feel.
Key features
- Home page plus a filterable property listings page
- Hero with an inline free rental analysis mini-form and validation
- Live property filtering by type, bedrooms, price, and availability
- Animated count-up trust stats via IntersectionObserver
- Six-service grid, owners-vs-renters split, and 4-step process
- Property cards with status badges, rent, and beds/baths/sqft
- Single-open owner FAQ accordion with keyboard support
- Sticky navbar with Owner login and Pay rent CTAs
- Vanilla JS, progressive enhancement, prefers-reduced-motion aware
Best for
- Residential property management companies
- Landlords and rental portfolio owners
- Real estate leasing and rental agencies
- HOA and multifamily management firms
- Property maintenance service businesses
At a glance
- Built on Bootstrap 5 with a heavy custom design layer (CSS custom properties, restyled components)
- Vanilla JavaScript only — no jQuery; progressive enhancement so all content is visible without JS
- Fully responsive and mobile-first; navbar collapses to an accessible off-canvas-style panel
- Accessible: semantic landmarks, ARIA on the accordion/filters/menu, visible focus, keyboard support, prefers-reduced-motion honored
- Self-hosted fonts-ready markup, lazy-loaded images with width/height, free for personal and commercial use
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is the Cornerstone template really free to use?
Yes. Cornerstone is free for both personal and commercial projects. You can use it for a client site or your own property management company without a license fee. Attribution is appreciated but not required.
Does Cornerstone use jQuery or any heavy frameworks?
No. Every interaction — the mobile menu, property filtering, count-up stats, FAQ accordion, form validation, and scroll reveals — is written in plain vanilla JavaScript. The only dependency is Bootstrap 5's bundle, which is self-hosted, so the template stays fast and easy to maintain.
How does the property filtering work?
The listings page filters properties instantly in the browser with no page reload. Visitors can narrow results by property type (house, condo, apartment, townhouse, duplex), minimum bedrooms, monthly rent range, and availability status. Each property card carries data attributes that the filter script reads, and a live results count and empty state keep the experience clear.
Will the site work if a visitor has JavaScript disabled?
Yes. Cornerstone is built with progressive enhancement. All content is fully visible without JavaScript — scroll-reveal animations only activate under a .js class that is added at load, so nothing is ever stuck at zero opacity. Interactive extras like filtering and the accordion degrade gracefully.
Is the template accessible and mobile-friendly?
Cornerstone is mobile-first and responsive down to small phones, with the navbar collapsing into an accessible slide-down menu. It uses semantic landmarks, ARIA attributes on the accordion, filters, and menu toggle, visible focus outlines, and full keyboard support. It also respects the prefers-reduced-motion setting for users who prefer less animation.
Can I customize the colors and fonts?
Easily. The entire palette is defined as CSS custom properties at the top of style.css — change a handful of variables like –forest and –gold to rebrand the whole template. Fonts are loaded from Google Fonts (Fraunces and Inter) and can be swapped by editing the font link and the –ff-display and –ff-sans variables.
What pages and sections are included?
There are two pages. The home page includes a dual-audience hero with a rental analysis form, a stats band, a services grid, an owners-versus-renters split, featured properties, a four-step process, a team row, testimonials, an owner FAQ, and a strong call-to-action band. The properties page adds a hero, a filter bar with type chips and dropdowns, a responsive grid of listings, and a follow-up CTA.
How do I replace the placeholder images?
Every image references a local path in the img/ folder (property photos, team portraits, and testimonials) and already includes width, height, lazy loading, and descriptive alt text. Drop in your own files using the same names and dimensions, or update the paths in the HTML. Team and testimonial photos are square, and property photos use a 4:3 ratio.
