Typography

The following utilities can be used to add additional styles to texts.

Headings

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading
Heading 6 Sub-heading

All HTML headings, <h1> through <h6> are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

Display 1

Display 2

Display 3

Display 4

Text colors

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-muted

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-primary

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-success

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-info

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-warning

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-danger

Text aligment

Left aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

.text-*-left

Center aligned text on all viewport sizes.

Center aligned text on viewports sized SM (small) or wider.

Center aligned text on viewports sized MD (medium) or wider.

Center aligned text on viewports sized LG (large) or wider.

Center aligned text on viewports sized XL (extra-large) or wider.

.text-*-center

Right aligned text on all viewport sizes.

Right aligned text on viewports sized SM (small) or wider.

Right aligned text on viewports sized MD (medium) or wider.

Right aligned text on viewports sized LG (large) or wider.

Right aligned text on viewports sized XL (extra-large) or wider.

.text-*-right

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous in Source Title

Use class blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous in Source Title

Add class text-right

List
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem

.list-unstyled

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

.list-inline

  1. Facilisis in pretium nisl aliquet.
  2. Nulla volutpat aliquam velit.
  3. Faucibus porta lacus fringilla vel.
  4. Integer molestie lorem at massa.
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a text-truncate class to truncate the text with an ellipsis.

Other
baseline top middle bottom text-top text-bottom

Use class align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom

Bold text.

.font-weight-bold

Normal weight text.

.font-weight-normal

Italicized text.

.font-italic

lowercased text.

.text-lowercase

uppercased text.

.text-uppercase

capitalized text.

.text-capitalize

Rounded image

.rounded

Rounded circle image

.rounded-circle

Rounded top image

.rounded-top

Rounded right image

.rounded-right

Rounded bottom image

.rounded-bottom

Rounded left image

.rounded-left