A bright, playful online course platform homepage built with Bootstrap 6 for a fictional school called Learnwell, with a topic search, a filterable course catalog, instructors, learner reviews, pricing and a free signup form.
How it works
Everything sits inside .lw-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and related tokens) to the brand coral, so every btn-solid theme-primary follows the brand.
- Navbar:
navbar lg:navbar-expandwith a<dialog class="drawer drawer-end">for mobile. "Courses" opens a.menuwithmenu-item-iconandmenu-item-description; each topic link carriesdata-lw-pickand preselects the catalog filter. - Hero: headline, a search bar built on the Bootstrap 6 Combobox (
data-bs-toggle="combobox",data-bs-search="true",data-bs-name="lw-topic") and popular topic.chipbuttons. On submit the script reads the hiddenlw-topicinput and filters the catalog. The[data-lw-cohort]label shows the next Monday, computed from today so it never goes stale. - Catalog: a
btn-groupofbtn-checkradio labels hides or shows.lw-course-colitems bydata-lw-cat. "Preview course" opens one shared<dialog class="dialog">and fills it fromdata-lw-titleand the pipe-separateddata-lw-lessons. - How it works, instructors, reviews: a
stepper md:stepper-horizontalinside.contains-inline, portrait cards and quote tiles. - Pricing: a Bootstrap 6
.switchtoggles.lw-price-amountbetweendata-lw-monthlyanddata-lw-yearly. - FAQ: an exclusive
<details name="lw-faq">accordion. - Signup:
<form data-bs-validate novalidate>; the script flags invalid fields with.is-invalid, simulates the request with a spinner and shows#lw-toast.
Customization
- Change
--lw-coral,--lw-sun,--lw-mintand--lw-inkon.lw-pageinstyle.cssto rebrand; adjust the--bs-primary-*overrides next to them so buttons follow. - Add a course by copying a
.lw-course-coland settingdata-lw-cattodev,design,dataorbusiness, plus a new filter label if you add a category. - Edit
data-lw-lessonson each.lw-preview-btnto list the lessons shown in the preview dialog. - Set your Plus prices in
data-lw-monthly/data-lw-yearlyon.lw-price-amount. - Replace the
setTimeoutin the form submit handler ofscript.jswithfetch()to your signup endpoint. - Remove
.lw-plan-plusto make both plans look equal. - The photos come from Unsplash; replace them with your own course covers and instructor portraits.
Accessibility
A skip link jumps to #lw-main. The drawer toggler keeps aria-expanded in sync, filter and billing changes are announced through polite live regions, the progress bar has role="progressbar" with values, and the toast uses role="status". Focus is always visible and hover motion stops under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Compared with Bootstrap 5: buttons use btn-solid theme-primary instead of btn-primary, the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Dropdown is now Menu, Modal is now Dialog, the accordion is native <details>, switches use .switch, and validation uses data-bs-validate. Combobox and Chips are new in Bootstrap 6. Combobox has no reset method, so the chosen topic stays selected after searching.
