Components: Bootstrap set

Every component Bootstrap documents, rebuilt in the Lustro style on Bootstrap 6.0.0-alpha.1 (pinned with SRI, same as Umail). The 52 sections render inside a scoped iframe so Bootstrap never bleeds into the VitePress shell. Fictitious data; live toasts and dialogs use Bootstrap 6 ESM inside the preview.

Open the Bootstrap 6 catalog full screen · Lustro BS6 shell

The blocks below are the legacy in-page .bsx previews (Bootstrap 5.3-depth markup). They remain for diffing during migration; the iframe above is the canonical BS6 render.

Legacy in-page previews (BSX)

Buttons: variants

PrimarySecondarySuccessWarningDangerInfoLightLink

Buttons: outline

PrimarySuccessWarningDangerInfo

Buttons: sizes

SmallDefaultLarge

SmallDefaultLarge

Buttons: disabled

PrimaryDefaultOutlineLink

Buttons: block and full width

Full width primaryFull width outline

Left halfRight half

Buttons: shapes

PillDefaultSquare

Buttons: active and toggle

ActiveToggled onToggled off

LeftMiddleRight

Buttons: with icons and counters

+ New⇩ Download✎ EditInbox 4✓

Buttons: loading

Saving Loading Please wait

Button groups: basic and sizes

LeftMiddleRight123AB

Button groups: toolbar and vertical

1234567TopMidBottom

Button groups: checkbox and radio style

Checkbox 1Checkbox 2Checkbox 3Radio 1Radio 2Radio 3

Button groups: with dropdown

Action▾LeftRightMore ▾

Badges: variants

PrimaryNeutralSuccessWarningDangerInfoOutline

Badges: pill, square, dot and in buttons

PillSquare OnlineNotifications 9Profile new

Badges: positioned on a button

Inbox 99+✉

Alerts: variants

Primary A simple alert with a link.

Success Saved. Changes are live.

Warning Needs review.

Danger Something went wrong.

Info Tip: drag rows to reorder.

Neutral Low emphasis note.

Alerts: with heading and actions

Well done
You completed the setup. Next, invite your team.

Invite Later

Payment failed
Your card was declined.

Alerts: dismissible and with icon

⚠Your trial ends in 3 days.✕

ⓘNew version available.✕

Cards: basic, header and footer

Card title

Some quick example text to build on the title.

Go

Featured

Special title

Supporting text below.

2 days ago

Cards: with image, horizontal and highlighted

With image

Cover image on top.

Horizontal

Image on the left.

Highlighted

Solid brand card.

Cards: list and grid groups

Includes

Item one

Item two

Item three

Stat

1,284

+12%

Forms: text inputs

Email

Password

At least 8 characters.

Disabled

Focused

Forms: sizes, textarea and file

⇧ Choose file

Forms: validation

Valid

Looks good.

Invalid

Enter a valid value.

Forms: input groups

@

.00

$

Go

Forms: floating labels and layout

First name

Last name

Select: variants

DefaultChoose...One

SmallSmall

LargeLarge

DisabledDisabled

Checks and radios

✓ Checked Unchecked– Indeterminate Disabled

Selected Option Disabled

✓ Inline A✓ Inline B Inline C

Switches

On Off Disabled on Disabled off

Range

Example range

Low

High

Nav and tabs

ActiveLinkLinkDisabled

PillPillPill

FillFillFill

DayWeekMonth

Nav: vertical and tab panes

ProfileBillingTeam

OverviewDetails

Tab pane content sits here.

Pagination

«123»«123»123123

Breadcrumbs

Home

HomeLibrary

HomeLibraryData

HomeProjectsAtlas

Dropdowns

Actions ▾

ActiveAnother actionSomething else

---

Disabled

Grouped ▾

Account

ProfileSettings

---

Danger

Delete

Split ▾

EditDuplicate

Modals

Modal title✕

Modal body text goes here.

CloseSave changes

Static render. Also: small, large, centered and scrollable variants share this anatomy.

Small
Confirm delete?

NoDelete

Large

Wide content area for forms and tables.

Tooltips

Tooltip on topTooltip on bottomTooltip leftTooltip right

Popovers

Popover title

And here is some amazing content.

Popover without a header.

Progress

60%

Spinners

List groups

Active item

Second item

Disabled item

Success item

Danger item

Item 14

One

Two

Three

Flush item

Flush item

Tables: basic, striped and hover

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

Tables: bordered, small, dark header and states

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

With status rows

#	First	Last	Handle
1	Passed	-	ok
2	Failed	-	err

Accordion

Accordion item #1

This is the first item body. Open by default.

Accordion item #2

Second item body.

Accordion item #3

Third item body.

Flush item

Flush variant without outer borders.

Another flush item

Content.

Collapse

Toggle contentToggle both

Collapsed content that is shown when toggled. Works with any block.

Click to expand

Native collapse using details, no script needed.

Toasts

Noticejust now✕

Hello, this is a toast message.

Saved successfully.

Failed to save.

Offcanvas

Offcanvas✕

Content for the end panel.

Start✕

Content for the start panel.

Carousel

Slide one

‹›

With caption

Second slide label

Avatars and stacks

ADADADABCDEF+4

Placeholders and skeletons

Steps and keyboard keys

✓ Account2 Details3 Review

Press Ctrl + K to search

Navbar

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.

Brand

OverviewProjectsReportsTeam

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

Brand

OverviewProjectsReportsTeam

Brand

OverviewProjectsReportsTeam

3