Templates

Components: Bootstrap set ​

Every component Bootstrap documents, rendered with Bootstrap 6.0.0-alpha.1 (pinned, SRI) and lumen-theme.css. Demos stay inside .lmn-bs6 / the gallery iframe so tokens do not bleed into the VitePress shell. Motion uses WAAPI entry fades with prefers-reduced-motion respected. Fictitious data.

Open the Bootstrap 6 gallery full screen

The sections below are kept for in-doc navigation; the live renders are in the gallery above.

Buttons: variants ​

View this section in the Bootstrap 6 gallery ↗

Buttons: outline ​

View this section in the Bootstrap 6 gallery ↗

Buttons: sizes ​

View this section in the Bootstrap 6 gallery ↗

Buttons: disabled ​

View this section in the Bootstrap 6 gallery ↗

Buttons: block and full width ​

View this section in the Bootstrap 6 gallery ↗

Buttons: shapes ​

View this section in the Bootstrap 6 gallery ↗

Buttons: active and toggle ​

View this section in the Bootstrap 6 gallery ↗

Buttons: with icons and counters ​

View this section in the Bootstrap 6 gallery ↗

Buttons: loading ​

View this section in the Bootstrap 6 gallery ↗

Button groups: basic and sizes ​

View this section in the Bootstrap 6 gallery ↗

Button groups: toolbar and vertical ​

View this section in the Bootstrap 6 gallery ↗

Button groups: checkbox and radio style ​

View this section in the Bootstrap 6 gallery ↗

Button groups: with dropdown ​

View this section in the Bootstrap 6 gallery ↗

Badges: variants ​

View this section in the Bootstrap 6 gallery ↗

Badges: pill, square, dot and in buttons ​

View this section in the Bootstrap 6 gallery ↗

Badges: positioned on a button ​

View this section in the Bootstrap 6 gallery ↗

Alerts: variants ​

View this section in the Bootstrap 6 gallery ↗

Alerts: with heading and actions ​

View this section in the Bootstrap 6 gallery ↗

Alerts: dismissible and with icon ​

View this section in the Bootstrap 6 gallery ↗

View this section in the Bootstrap 6 gallery ↗

Cards: with image, horizontal and highlighted ​

View this section in the Bootstrap 6 gallery ↗

Cards: list and grid groups ​

View this section in the Bootstrap 6 gallery ↗

Forms: text inputs ​

View this section in the Bootstrap 6 gallery ↗

Forms: sizes, textarea and file ​

View this section in the Bootstrap 6 gallery ↗

Forms: validation ​

View this section in the Bootstrap 6 gallery ↗

Forms: input groups ​

View this section in the Bootstrap 6 gallery ↗

Forms: floating labels and layout ​

View this section in the Bootstrap 6 gallery ↗

Select: variants ​

View this section in the Bootstrap 6 gallery ↗

Checks and radios ​

View this section in the Bootstrap 6 gallery ↗

Switches ​

View this section in the Bootstrap 6 gallery ↗

Range ​

View this section in the Bootstrap 6 gallery ↗

View this section in the Bootstrap 6 gallery ↗

View this section in the Bootstrap 6 gallery ↗

Pagination ​

View this section in the Bootstrap 6 gallery ↗

View this section in the Bootstrap 6 gallery ↗

View this section in the Bootstrap 6 gallery ↗

Modals ​

View this section in the Bootstrap 6 gallery ↗

Tooltips ​

View this section in the Bootstrap 6 gallery ↗

Popovers ​

View this section in the Bootstrap 6 gallery ↗

Progress ​

View this section in the Bootstrap 6 gallery ↗

Spinners ​

View this section in the Bootstrap 6 gallery ↗

List groups ​

View this section in the Bootstrap 6 gallery ↗

Tables: basic, striped and hover ​

View this section in the Bootstrap 6 gallery ↗

Tables: bordered, small, dark header and states ​

View this section in the Bootstrap 6 gallery ↗

Accordion ​

View this section in the Bootstrap 6 gallery ↗

Collapse ​

View this section in the Bootstrap 6 gallery ↗

Toasts ​

View this section in the Bootstrap 6 gallery ↗

Offcanvas ​

View this section in the Bootstrap 6 gallery ↗

View this section in the Bootstrap 6 gallery ↗

Avatars and stacks ​

View this section in the Bootstrap 6 gallery ↗

Placeholders and skeletons ​

View this section in the Bootstrap 6 gallery ↗

Steps and keyboard keys ​

View this section in the Bootstrap 6 gallery ↗

Language select ​

A compact language switcher: a globe, the current language code and a chevron. Click it to open the list, move with the arrow keys, Home and End, press Enter to choose and Escape to close. The choice updates the code on the button; wire it to your i18n routing.

A top navigation bar with a brand, links, a dropdown, search and a collapse button under 700 px. Click a link to mark the current page, open "More", or press Escape to close menus. A secondary tinted bar and an inverted bar show the same links in other treatments. Menus animate in with Motion and stay still with reduced motion.

Responsive collapse: narrow the window under 700 px and use the menu button. Current: Projects.