Typography

Headings

All HTML headings, <h1> through <h6>, are available.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Display Headings

.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

Description list

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

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.

Colored Text

Color text are awesome

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Inline Text

Remove a list’s bullets and apply some light marginwith a combination of two classes, .list-inline and .list-inline-item.

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ordered

A list of items in which the order does explicitly matter

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Unstyled

This only applies to immediate children list items.

Lorem ipsum dolor sit amet
Integer molestie lorem at massa
- Phasellus iaculis neque
Faucibus porta lacus fringilla vel
Eget porttitor lorem

Lorem ipsum dolor sit amet

Integer molestie lorem at massa

Phasellus iaculis neque

Faucibus porta lacus fringilla vel

Eget porttitor lorem