h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):

Display 1

Display 2

Display 3

Display 4

Lighter, Secondary Text

The small element is used to create a lighter, secondary text in any heading:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

Other Text Operations

Use the mark element to highlight text.

The abbr element is used to mark up an abbreviation or acronym:

The WHO was founded in 1948.

The blockquote element is used to present content from another source:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

The dl element indicates a description list:

Coffee
- black hot drink
- Usually drank by adults
Milk
- white cold drink

Inline snippets of code should be embedded in the code element:

The following HTML elements: span, section, and div defines a section in a document.

For multiple lines of code, use the pre element:

    Text in a pre element
    is displayed in a fixed-width
       font, and it preserves
    both      spaces and
    line breaks.
      

Font weight and italics

Bold text.

Normal weight text.

Light weight text.

Italic text.

Use the .lead class to make a paragraph "stand out":

This paragraph stands out.

This is a regular paragraph.

Use the .small class to make the text smaller:

This paragraph is smaller.

This is a regular paragraph.

Typography

Left-aligned text.

Right-aligned text.

Center-aligned text.

Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.

No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text.

Tip: Try to resize the browser window to see the behaviour of justify and nowrap.

Typography

Lowercased text.

Uppercased text.

Capitalized text.

Typography

The WHO was founded in 1948. (normal abbr)

The WHO was founded in 1948. (slightly smaller abbr)

Typography

The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):

Typography

The class .list-inline places all list items on a single line, when used together with the .list-inline-item:

Code

For multiple lines of code, use the pre element:

Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks.

If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:

Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks.
    Line 1
    Line 2
    Line 3
    Line 4
    Line 5
    Line 6
    Line 7
    Line 8
    Line 9
    Line 10
    Line 11
    Line 12
    Line 13
    Line 14
    Line 15
    Line 16
    Last
      

Contextual Colors

Use the contextual classes to provide "meaning through colors":

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

This text is dark grey.

This text is light grey (on white background).

This text is light grey (with a dark background).

This text is white (on white background).

This text is white (on dark background).

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

Contextual Link Colors

Hover over the links.

Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Light grey link. Light grey link. White link. White link.

Contextual Backgrounds

Use the contextual background classes to provide "meaning through colors".

Note that you can also add a .text-* class if you want a different text color:

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Primary background with dangerous text