A cheerful kindergarten homepage built with Bootstrap 6 for a fictional school, Little Acorns, with programs, a daily timeline, teachers, parent reviews and a visit booking form.
How it works
Everything lives in .ka-page, which pins data-bs-theme="light" and maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and friends) to the brand coral, so every btn-solid theme-primary follows the palette.
- Navbar:
navbar lg:navbar-expandwith a<dialog class="drawer drawer-end">for phones and tablets. "Programs" opens a.menuwithmenu-item-descriptionlines. The script syncsaria-expandedon.ka-togglerand closes the drawer after an in-page link. - Hero: headline with the wavy
.ka-squiggleunderline, quick facts and.ka-collage: two photos in blob and tilted frames with floating.ka-stickercards. - Values and programs: four tinted value tiles, then
nav nav-pillstabs (data-bs-toggle="tab") switching three.ka-programpanels with a photo, checklist,chipfacts and a price. - Our day: a
stepper md:stepper-horizontalinside.contains-inline. The script readsdata-ka-timeon each step and, on weekdays during opening hours, marks finished stepsactiveand the current one.ka-now. - Enrollment: a vertical
stepper, a progress bar for remaining places and<form data-bs-validate novalidate>with a Combobox for the program and a Datepicker for the visit day. The script limits the Datepicker from tomorrow to 45 days ahead, so it never shows stale dates, checks the Combobox value, simulates sending with a spinner and shows#ka-toast. - FAQ and footer: an exclusive
<details name="ka-faq">accordion, address, hours and the current year.
Customization
- Change
--ka-coral,--ka-sun,--ka-skyand--ka-leafon.ka-pageinstyle.cssto rebrand; update the--bs-primary-*overrides next to them so buttons follow. - Edit the
data-ka-timevalues in.ka-stepperto match your own timetable. - Change the
45in the Datepicker block ofscript.jsto open bookings further ahead. - Replace the
setTimeoutin the form submit handler withfetch()to your booking endpoint. - Adjust
.ka-spots-barwidth and the "7 of 24" text to show real availability. - Delete sections such as
.ka-valuesor.ka-day(and their navbar links) for a shorter page. - The photos come from Unsplash; replace them with your own photos of your rooms, teachers and families (with consent).
Accessibility
A skip link jumps to #ka-main. Tabs use role="tab" and aria-selected, the current day step gets aria-current="step", the progress bar has an aria-label, and the toast uses role="status". Invalid fields receive .is-invalid with visible messages and focus moves to the first problem. Focus outlines are thick and visible, and the rotating sun and card hover stop under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). BS5 developers will notice: btn-solid theme-primary replaces btn-primary, the navbar uses a Drawer instead of navbar-collapse, Dropdown is now Menu, the accordion is native <details>, validation uses data-bs-validate, and the new Combobox, Datepicker and Stepper components replace custom plugins.
