Roost — Free Vacation Rental / BnB Website Template
Roost is a free Bootstrap 5 template for a single vacation rental — one cabin, cottage or BnB presented Airbnb-style, not as a multi-room hotel brochure. Its standout is a working two-month availability calendar wired to a sticky booking card that live-prices each stay as you pick dates. Everything runs on vanilla JavaScript with no jQuery and no icon fonts.
Key features
- Interactive two-month availability calendar with 2-night minimum and booked-night blocking
- Sticky booking card that live-prices the stay as you pick dates
- Airbnb-style gallery mosaic with full-screen lightbox (arrows, Esc, counter)
- Amenities checklist with inline-SVG icons and a show-all expander
- Host profile block with Superhost stats, verified badges and response rate
- Guest reviews with rating-breakdown bar chart and expandable cards
- Location block with map pin, what's-nearby distances and getting-around notes
- Mobile sticky book bar, save-to-wishlist, share and toast feedback
- Vanilla JS, no jQuery, inline-SVG icons, self-hosted Bootstrap 5
Best for
- A single cabin, cottage or A-frame rental
- Independent BnB and short-let hosts
- Airbnb or Vrbo hosts wanting a direct-booking page
- A one-property vacation-rental listing
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Homey woodland-cottage — birch, deep pine and lantern-amber with a friendly modern grotesque
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 Roost really free for commercial use?
Yes. You can use it for personal and client projects, including real rental or BnB listings you intend to publish. A link back to uiCookies is appreciated but not required, and there's no separate license to buy.
Does the availability calendar actually work?
Yes — it's hand-written vanilla JavaScript, not a placeholder. You pick a check-in date then a check-out date, booked nights are disabled, and a two-night minimum is enforced. The booking card and mobile book bar re-price the stay instantly as the dates and guest count change.
How do I change the property, price or photos?
Edit the copy directly in index.html and swap the images in the img/ folder. Nightly rate and fees live as NIGHTLY, CLEANING, SERVICE and MIN_NIGHTS near the top of js/main.js, and blocked dates live in the BOOKED list right beside them. No build step or framework knowledge is needed.
Where do I change the colours and fonts?
All colours are CSS custom properties at the top of css/style.css — the birch, deep pine and lantern-amber palette is defined once and reused everywhere. The fonts are Bricolage Grotesque and Nunito Sans, both self-hosted, so you swap them in the CSS and head without calling an external font service.
Is it responsive and mobile-friendly?
Yes. It's built on the Bootstrap 5 grid, so the gallery mosaic, calendar, reviews and host block all adapt down to phone widths. On small screens a sticky book bar appears as you scroll so the price and booking action stay within reach.
Can I edit it without a build tool or command line?
Yes. Roost is a plain static front-end — HTML, CSS and JavaScript with no npm install, no compiler and no framework to learn. You can open the files in any editor, make changes and refresh the browser to see them.
Does the booking card take real reservations or payments?
No. It's a static front-end, so it calculates and displays the nightly total, discounts and fees but does not store reservations or process payments. The booked dates and prices are config values in js/main.js, so you can later wire the calendar and booking card to your own availability feed, PMS or checkout backend.
Does it use jQuery or icon fonts, and which browsers does it support?
No jQuery and no icon fonts — every interaction, from the calendar and booking maths to the lightbox, filters and toasts, is vanilla JavaScript, and every icon is inline SVG. The only dependency is the self-hosted Bootstrap 5 bundle. It works in all current browsers and deploys cleanly on strict-CSP hosts.
