A dark, old-school barbershop homepage built with Bootstrap 6 for a fictional shop called Northgate Barber Club, with a price list, barber profiles, online booking, reviews and live opening hours.
How it works
Everything sits inside .nb-page, which carries data-bs-theme="dark" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and friends) to brass. Fonts: Oswald and Karla.
- Navbar:
navbar lg:navbar-expandwith a<dialog class="drawer drawer-end">. Below 1024px the toggler opens the drawer; the script syncsaria-expandedand closes it after an in-page link. "More" opens a.menuwithmenu-item-iconandmenu-item-description. - Hero: a striped barber pole (
.nb-pole), headline, calls to action and quick facts. The.nb-ticketcard shows the next open chair, computed fromNB_HOURSinscript.jsrelative to the visitor's clock. - Services:
nav nav-underlinetabs switch three.tab-paneprice lists. Each.nb-price-rowhas a dotted.nb-leader. - Barbers: four cards with Unsplash photos and
.chipspecialties. Adata-nb-barberbutton preselects that barber in the booking form and scrolls to it. - Booking:
<form data-bs-validate novalidate>with a searchable Combobox (data-bs-toggle="combobox") for the service, a Datepicker limited to today plus 60 days,btn-checkradio labels for time slots and a.switch. On submit the script checks the Combobox's hiddenserviceinput, flags invalid fields with.is-invalid, shows a spinner and opens#nb-toastwith the chosen date and time. - Reviews, visit and club: rating bars built with
.progress, quote cards, an hours table whose current day gets.nb-today, an open/closed badge, an SVG street map and a membership CTA.
Customization
- Change
--nb-brass,--nb-redand--nb-bluein.nb-page(style.css) to rebrand; update the--bs-primary-*overrides beside them so buttons follow. - Edit
NB_HOURSinscript.jsand thedata-nb-dayrows of.nb-hourstogether when your opening hours change. - Add or remove time slots by copying a
btn-checklabel inside.nb-time-grid. - Add services as
.menu-itembuttons with adata-bs-valuein the Combobox menu. - Replace the
setTimeoutin the submit handler ofscript.jswithfetch()to your booking endpoint. - Remove
.nb-quote-accentfrom the second review to make all quotes look the same. - The photos come from Unsplash; replace them with pictures of your own shop and team.
Accessibility
A skip link jumps to #nb-main. Tabs use role="tab" with aria-selected, time slots sit in a fieldset with a legend, the map is one role="img" with a label, and the next-chair card and toast are polite live regions. Focus rings are visible in brass, and the pole animation and hover effects stop under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Coming from Bootstrap 5: the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Dropdown is now Menu, form-select is gone (a <select class="form-control"> is used), validation uses data-bs-validate instead of needs-validation, and the Combobox and Datepicker are new built-in components. After a simulated booking the form keeps its values, because the Combobox has no public reset method.
