Checked Checkbox Checkbox

Active Radio Radio

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading with muted text

A lead paragraph stands out from regular body text.

Body text

Regular paragraph text sits here so you can judge line length, weight and contrast against the page background. A good theme keeps this comfortable to read for long stretches.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicised text.

An abbreviation of the word attribute is attr.

Some inline code, a key press Ctrl + K, and highlighted text.

Emphasis classes

.text-primary

.text-primary-emphasis

.text-secondary

.text-body-secondary

.text-body-tertiary

.text-success

.text-info

.text-warning

.text-danger

Display headings

Display 1

Display 4

Display 6

Blockquotes

Simplicity is a great virtue but it requires hard work to achieve it.

Make it work, make it right, make it fast.

Programs must be written for people to read.

Code block

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
}

Type	Column heading	Column heading	Column heading
Active	Cell	Cell	Cell
Default	Cell	Cell	Cell
Primary	Cell	Cell	Cell
Secondary	Cell	Cell	Cell
Success	Cell	Cell	Cell
Danger	Cell	Cell	Cell
Warning	Cell	Cell	Cell
Info	Cell	Cell	Cell
Light	Cell	Cell	Cell
Dark	Cell	Cell	Cell

Name	Status	Owner	Updated
Alpha	Draft	Sam	Today
Beta	Review	Alex	Yesterday
Gamma	Published	Jo	Last week

Legend

Email

Email address

We'll never share your email with anyone else.

Password

Example select

Example multiple select

Example textarea

Default file input

Radio buttons

Option one is checked

Option two

Option three is disabled

Checkboxes & switches

Default checkbox

Checked checkbox

Default switch

Checked switch

Ranges Example range Disabled range

Disabled input

Readonly input

Valid input

Looks good.

Invalid input

Sorry, that value isn't allowed.

Large input

Default input

Small input

Input addons

$ .00

Floating labels

Email address

Password

Tabs

Dropdown
- Action
- Another action

Content for the home tab. Switch tabs to see the active and hover states.

Content for the profile tab.

Pills

Breadcrumbs

Pagination

Alerts

Warning!

Best check yourself, you're not looking too good. This alert also has a link in it.

Oh snap! Change a few things up and try again.

Well done! You read this important alert.

Heads up! This needs your attention.

Primary. With a link.

Secondary. With a link.

Light. With a link.

Badges

Primary Secondary Success Danger Warning Info Light Dark

Basic

Contextual alternatives

Multiple bars

Striped & animated

40%

List groups

Inbox 14
Drafts 2
Archive 1

Active item Linked item Disabled item

Release notes

3 days ago

Headings, body and small text inside an item.

And some muted small print.

Roadmap

1 week ago

A second item for comparison.

Primary Secondary Success Danger Warning Info Light Dark