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
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