Brber

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Photos from Unsplash, icons by Lucide, fonts Oswald, Poppins and Open Sans (SIL OFL)

Brber is a website template for barber shops and hair studios, built on Bootstrap 5 with a dark, high-contrast design. The layout is responsive and works in all popular web browsers. It comes with eight pages: home, about, services, portfolio, blog, blog details, contact and an elements page, plus Colorlib’s thank-you page.

The home page has a full-width hero banner with a booking call to action, an about section, service cards, a team slider, a price list, a photo gallery, a testimonial slider and recent articles, with a sticky header and a back-to-top button. The blog has a post list and a sidebar with search, categories, recent posts, tags and a newsletter box, and the article page adds comments and a comment form. The contact page has a click-to-load map, opening details and a working contact form.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass together with the theme, and plain JavaScript with no jQuery. Swiper 14 replaces Slick for the team and testimonial sliders and PhotoSwipe replaces Magnific Popup in the gallery; npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all pages together went from 38.7 MB and 508 requests to 5.9 MB and 228 requests, and the download from 20.8 MB to about 5 MB. Photos have AVIF versions with a JPEG fallback, real dimensions and lazy loading, and the home page preloads its hero photo.
• No third-party requests: Oswald, Poppins and Open Sans are self-hosted, the old icon fonts are replaced by Lucide SVG icons and a small social-logo subset, and the Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its fonts from Google Fonts.
• Working forms: the contact, newsletter and comment forms validate in the browser and send through php/send-email.php with a spam trap and an in-page message. Before, the newsletter and blog forms had no working action.
• Click-to-load map: the contact page shows the address and loads an OpenStreetMap map only after a click, without an API key.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a keyboard-operable menu and phone menu, visible focus, and text colours that meet WCAG AA contrast.
• Updated photos and copy: new licensed photos for the hero, team, gallery and blog, a rewritten price list, and a README, changelog and documentation page generated from it.