Lumen · Bootstrap 6 component set

Buttons: variants

Buttons: outline

Buttons: sizes

Buttons: disabled

Buttons: block and full width

Left halfRight half

Buttons: shapes

Buttons: active and toggle

Buttons: with icons and counters

Buttons: loading

Saving Loading Please wait

Button groups: basic and sizes

Button groups: toolbar and vertical

Button groups: checkbox and radio style

Button groups: with dropdown

Badges: variants

PrimaryNeutralSuccessWarningDangerInfoOutline

Badges: pill, square, dot and in buttons

PillSquare Online

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.

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.

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

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

Default

Small

Large

Disabled

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

Active Link Link Disabled

Pill Pill Pill

Fill Fill Fill

Day Week Month

Nav: vertical and tab panes

Profile Billing Team

Overview Details

Tab pane content sits here.

Pagination

«1 2 3 »«1 2 3 »1 2 31 2 3

Breadcrumbs

Home

HomeLibrary

Home LibraryData

Home ProjectsAtlas

Dropdowns

Modals

Modal body text goes here.

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

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

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

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