Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a lead paragraph. It stands out from regular body text.

Regular body text. Bootstrap includes global settings for typography, including bold, italic, and linked text.

Muted using .text-muted.

Body secondary using .text-body-secondary.

Body tertiary using .text-body-tertiary.

Body emphasis using .text-body-emphasis.

Primary using .text-primary.

Primary emphasis using .text-primary-emphasis.

Success using .text-success.

Success emphasis using .text-success-emphasis.

Danger using .text-danger.

Danger emphasis using .text-danger-emphasis.

Warning using .text-warning.

Warning emphasis using .text-warning-emphasis.

Info using .text-info.

Info emphasis using .text-info-emphasis.

Highlighted text and small text and deleted text.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Subtle Backgrounds

.bg-primary-subtle with .text-primary-emphasis
.bg-secondary-subtle with .text-secondary-emphasis
.bg-success-subtle with .text-success-emphasis
.bg-danger-subtle with .text-danger-emphasis
.bg-warning-subtle with .text-warning-emphasis
.bg-info-subtle with .text-info-emphasis
.bg-light-subtle with .text-body-emphasis
.bg-dark-subtle with .text-dark-emphasis

Buttons

Cards

Featured
Card Title
Card Subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
2 days ago
Success Card

This card uses a success border and title color to convey a positive state.

Learn More
Colored Card

Cards can use background and text color utilities to change their appearance entirely.

Action

Alerts

A primary alert — check it out!
A success alert — great work!
A warning alert — watch out!
A danger alert — something went wrong!
An informational alert — heads up!

Badges

Primary Secondary Success Danger Warning Info

Primary Secondary Success Danger