Balay

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Balay is a website template for design-and-build studios, architects, builders and interior designers, built on Bootstrap 5. It has a fixed sidebar with the logo, menu and social links, which becomes a slide-out menu on small screens, and the layout is responsive and mobile-ready. There are six pages: home, projects, about, services, blog and contact.

The home page has a full-height hero slider, an about block, services with icons and photo cards, animated counters, recent projects, blog cards and a contact band. The projects page shows a grid of projects with captions, the about page adds the studio’s history in an accordion and the counters, the services page lists the services with photo cards, and the contact page has the studio’s details, a working contact form and a map that loads on click. Balay gives you a ready-made site to present a studio’s services and finished work.

What’s new in 3.0

• Bootstrap 5.3.8, two major versions on from the Bootstrap 3.3.5 and jQuery 1.11 of the earlier release, compiled from Sass together with the theme and the Bootstrap 3 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Flexslider on the hero, small built-in modules replace Waypoints with animate.css and jquery.countTo for the scroll reveals and the counters, the about page history uses Bootstrap 5 cards, and Owl Carousel, sticky-kit, jquery.easing, Modernizr and respond.js, which loaded on every page but did nothing, are gone. Lucide SVG icons, with construction icons for the services and counters, replace the icomoon and Flaticon fonts, and a small subset of Font Awesome 7 Brands draws the social logos. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the contact page went from 1.7 MB and 34 requests to 209 KB and 8 requests, and the services page from 951 KB to 295 KB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading, Swiper loads only on the home page and Bootstrap’s JavaScript only on the about page. The hero and counter photos are now 2000 to 2560 px wide (they were about 1200 px), so they stay sharp on large screens. The download is now 4.8 MB (it was 4.0 MB), because it also includes the Bootstrap 5 Sass source and build tools, the wider hero photos and AVIF copies of the photos.
• No third-party requests: Quicksand is self-hosted, the icons are local SVGs, the contact page map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its fonts from Google Fonts, and the contact page loaded the Google Maps script, which showed an error in place of the map.
• Working contact form: the form sends through php/send-email.php, with validation, a spam trap and an in-page message. Before, its fields had no names and it had no handler, so sending it only reloaded the page.
• Accessibility: a skip link, a main landmark and one h1 per page, a real menu button that announces whether the menu is open and closes it with Esc, labelled form fields, names on icon-only links, project captions that also appear on keyboard focus, visible focus rings and WCAG AA text contrast, with all text at 5.3:1 or better: dark text on the yellow buttons and pagination (white on yellow was 1.6:1), a darker gold for links and icons, brighter sidebar text, and darker overlays behind the counters and behind the project captions on phones.
• Fixed: the hero caption appears with the first slide (it stayed invisible until the old slider script had run), the hero no longer requests a missing loader image, and every page has a favicon. The blog and projects pagination, whose page numbers pointed nowhere, now shows the single current page between disabled arrows, and the hero “View project” buttons, the “Contact me!” buttons, the about steps and the project and blog cards open their pages. Every page has its own title and description.
• New demo content: copy for a design-and-build studio in place of lorem ipsum, a subtitle of its own on each hero slide, and corrected typos. Photos that showed brand names or logos, or came from other studios’ own marketing, are replaced with Unsplash photos, the projects page no longer repeats a photo, and labels and logos in some of the new photos are blurred.