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

Use class `blockquote`

> Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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`

`.rounded-circle`

`.rounded-top`

`.rounded-right`

`.rounded-bottom`

`.rounded-left`