Barbero

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Barbero is a website template for barber shops, salons and grooming studios, built on Bootstrap 5. The layout is responsive and works in all popular web browsers. It comes with eight pages: home, about, pricing, gallery, team, blog, blog single and contact.

The home page has a full-screen hero, service cards, an about block with a years-of-experience counter, a tabbed team section, a video section, a photo gallery with a lightbox, three price plans, a testimonial slider, an appointment form and recent posts. The inner pages add a team page, a blog with a sidebar and a comment form, and a contact page with a message form and a click-to-load map.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.5 and jQuery), compiled from Sass with the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the testimonial slider, PhotoSwipe replaces Magnific Popup in the gallery, and small built-in modules replace Waypoints and the counter plugin. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all pages together went from 25.6 MB and 347 requests to 11.5 MB and 182 requests, and the home page from 6.5 MB to 2.9 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the hero.
• No third-party requests: Poppins and Barlow Condensed are self-hosted, the Flaticon, Open Iconic and Font Awesome 4 icon fonts are replaced by Lucide SVG icons and a small social-logo subset (the Twitter bird is now the X logo), the video is a stock clip that loads from YouTube’s privacy-enhanced player only after a click, the contact map loads only when you press Show map, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the appointment form, the contact form and the comment form send through php/send-email.php, with validation, a spam trap and an in-page message. Before, none of them had an action or named fields, so nothing could be sent.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, labelled form fields, names on icon-only links, visible focus rings, reduced-motion support and WCAG AA text contrast, with a deeper gold behind white labels and for gold text on white.
• Fixed: every gallery photo opened the first image in the lightbox, the team tabs showed the wrong thumbnails, the footer and button links went nowhere, and the menu loaded a preloader that hid the page.
• Demo content: fictional team and customer names, an example address, phone number and email, initials avatars, and new Unsplash photos for every picture.