Select Bootstrap 5 Theme

Select Theme

A quick way to change the current Bootstrap 5 theme.

Bootstrap 5 Theme Kitchen Sink

A comprehensive preview of this Bootstrap 5 theme.

Typography

Display 1

Display 6 With muted text

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading
This is an h6 heading
Tables
# First Name Description
1 Michael Tables are formatted like this
2 Lucille Do you like them?
3 Success Success state
4 Danger Danger state
5 Warning Warning state
6 Info Info state
# First Name Description
1 Michael This one is bordered and small
2 Lucille Do you still like it?
Content Formatting

This is a lead paragraph.

This is an ordinary paragraph that is long enough to wrap to multiple lines so that you can see how the line spacing looks.

Muted color paragraph.

Warning color paragraph.

Danger color paragraph.

Info color paragraph.

Success color paragraph.

Primary color paragraph.

Secondary color paragraph.

This is text in a small wrapper. NBD, right?


Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
[email protected]

Here's what a blockquote looks like in Bootstrap 5.

Someone famous in Source Title

  • Normal Unordered List
  • Can Also Work
    • With Nested Children
  • Adds Bullets to Page
  1. Normal Ordered List
  2. Can Also Work
    1. With Nested Children
  3. Adds Numbers to Page

function preFormatting() {
    // looks like this;
    var something = somethingElse;
    return true;
}
Buttons

Images
Rounded Circle Thumbnail
Input Groups
.00
$ .00
Badges

Secondary Primary Success Warning Danger Info Light Dark

Inbox 42

Alerts
Progress Bars
60%
40%
20%
60%
80%
Forms
We'll never share your email with anyone else.
Primary Card

This is a primary card with supporting text below as a natural lead-in to additional content.

Success Card

This is a success card with supporting text below as a natural lead-in to additional content.

Danger Card

This is a danger card with supporting text below as a natural lead-in to additional content.

Warning Card

This is a warning card with supporting text below as a natural lead-in to additional content.

Info Card

This is an info card with supporting text below as a natural lead-in to additional content.

Default Card

This is a default card with supporting text below as a natural lead-in to additional content.

  • First Item
  • Second Item
  • Third Item
Default Card

This card has supporting text below as a natural lead-in to additional content.

Go somewhere
Small Card

Some quick example text to build on the card title.

Large Card

This is a larger card with more padding and content. It demonstrates how cards can be used for various content types and layouts in Bootstrap 5.

Multiple paragraphs can be included to show more complex content structures.

Learn more
Accordion

This is the first item's accordion body with Bootstrap 5 styling.

This is the second item's accordion body.
Toast Notification