A warm, light nonprofit homepage built with Bootstrap 6 for a fictional charity called Brightroot Foundation, with causes, impact numbers, a donation form, donor stories and an FAQ.
How it works
The page lives in .br-page, which carries data-bs-theme="light" and maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-control-checked-bg, --bs-focus-ring) to forest green. Fonts: Fraunces and Figtree.
- Top bar and navbar: a trust message in
.br-topbar, thennavbar lg:navbar-expandwith a<dialog class="drawer drawer-start">. "Our work" opens a.menu; the script syncsaria-expandedand closes the drawer after a link. - Hero: a centered serif headline above three arch-shaped photos (
.br-arch) with floating stat badges (.br-float). - Impact band: four key numbers in
.br-stats. - Causes:
chipbuttons withdata-br-filterhide or show the columns markeddata-br-group. Each card has a progress bar and adata-br-givebutton that preselects the cause in the donation form. - Donate: a Bootstrap 6 Range slider (
.form-rangewithdata-bs-bubble) drives the impact text fromBR_IMPACTinscript.js. The form usesbtn-checkradio labels for frequency and amount, aform-adorncustom amount field, a.checkfor the card fee anddata-bs-validatefor CSS-only validation. The submit label updates live ("Give $51.75 monthly"). A simulated request then shows the[data-br-thanks]alert. "See exactly where the money goes" opens the#br-fundsdialog with aprogress-stackedbreakdown. - Stories, FAQ and CTA: a scroll-snap
carouselof donor quotes, an exclusive<details name="br-faq">accordion and a volunteer email form with simulated sign-up.
Customization
- Change
--br-forest,--br-goldand--br-clayin.br-page(style.css) to rebrand; keep the--bs-primary-*overrides beside them in step. - Edit the
BR_IMPACTtiers inscript.jsto describe what each amount funds in your programs. - Set
BR_FEE_RATEinscript.jsto your payment provider's fee percentage. - Add a cause by copying a column with
data-br-group, adding a matching<option>to#br-causeand adata-br-givevalue. - Change the raised percentage of a cause by editing its
aria-valuenowand width class (.br-w72and friends). - Replace the
setTimeoutin the submit handler with your payment provider or afetch()call to your donation endpoint. - The photos come from Unsplash; replace them with photos of your own programs and people.
Accessibility
A skip link jumps to #br-main. Filter chips use aria-pressed, amounts and frequency sit in a labelled group and fieldset, the impact text and filter count are polite live regions, and the thank-you alert receives focus after submit. Focus outlines are visible, and hover lifts and smooth scrolling 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: Offcanvas is now a Drawer <dialog>, Modal is a Dialog <dialog class="dialog">, Dropdown is Menu, the accordion uses native <details>, form-check became .check inside .form-field, form-select is gone (a <select class="form-control"> is used) and the range slider is the new Range component with a value bubble.
