University Homepage Template

A classic, editorial university homepage built with Bootstrap 6 for a fictional Northmere University, with a campus photo hero, a visit booking card, a program finder, news, upcoming events, student testimonials and an admissions enquiry form.

How it works

The page root .nu-page pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and related tokens) to the university burgundy.

• Utility bar and navbar: a slim .nu-utility row with audience links above a navbar lg:navbar-expand. On small screens the toggler opens a <dialog class="drawer drawer-start">. "Study" opens a .menu; each item carries data-nu-tab and opens the matching program tab through Tab.getOrCreateInstance().
• Hero: the campus photo is a CSS background under a navy gradient. The .nu-visit card uses the Bootstrap 6 Datepicker (data-bs-toggle="datepicker"); the script sets data-bs-date-min to tomorrow and data-bs-date-max to 90 days ahead before the first open.
• Programs: nav nav-tabs switch three .tab-pane panels of .nu-program links. The form-adorn search field filters programs in every pane and shows [data-nu-empty] when nothing matches.
• News: a lead story and two compact .nu-story-row cards. Each time[data-nu-days-ago] gets a real date computed from today.
• Events: .nu-event-date tiles are filled from data-nu-in-days, so the list never shows past dates. The "Save" buttons use the Bootstrap 6 Toggler (data-bs-toggle="toggler", data-bs-value="nu-saved"); the script keeps aria-pressed and the label in sync.
• Campus life and voices: a photo collage and a scroll-snap carousel.
• Admissions: a vertical stepper beside <form data-bs-validate novalidate>. Invalid fields get .is-invalid; a valid submit shows a spinner and #nu-toast.

Customization

• Change --nu-navy, --nu-gold and --nu-burgundy on .nu-page in style.css, and the --bs-primary-* overrides next to them, to apply your own colors.
• Swap the hero photo URL in the .nu-hero background rule for a picture of your own campus.
• Add programs by copying a .nu-program link into the right .tab-pane; the filter picks them up automatically.
• Set data-nu-in-days on each .nu-event-date to schedule events relative to today, or replace the script logic with dates from your CMS.
• Replace the setTimeout in the .nu-form submit handler (and the comment in the visit handler) with fetch() calls to your endpoints.
• The photos come from Unsplash; replace them with your own campus and student images.

Accessibility

A skip link targets #nu-main. The drawer toggler syncs aria-expanded, tabs use role="tab" with aria-selected, the program filter announces results in a polite live region, event date tiles get a full spoken date, Save buttons expose aria-pressed, and the toast uses role="status". Focus is always visible and motion stops under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Bootstrap 5 developers will notice: btn-solid theme-primary replaces btn-primary, the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Menu replaces Dropdown, <select> uses form-control instead of form-select, the carousel is CSS scroll-snap with carousel-icon-prev/-next, and validation uses data-bs-validate. Datepicker, Toggler, Stepper and form-adorn are new in Bootstrap 6.