Typography

Documentation and examples for typography, including global settings, headings, body text, lists, and more.

Headings

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 still want your text to be displayed inline.

h1. Sample heading

h2. Sample heading

h3. Sample heading

h4. Sample heading

h5. Sample heading
h6. Sample heading
<h1>h1. Sample heading</h1>
<h2>h2. Sample heading</h2>
<h3>h3. Sample heading</h3>
<h4>h4. Sample heading</h4>
<h5>h5. Sample heading</h5>
<h6>h6. Sample heading</h6>

Anchor titles

Add an id attribute to a heading tag, if you want to make it accessible through a link.

Header name
<h5 id="header-name">Header name</h5>

Lead

Make a paragraph stand out by adding .lead.

This paragraph has larger text size.

<p class="lead">This paragraph has larger text size.</p>

Inline text elements

Styling for common inline HTML5 elements.

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.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Lists

Display a list of items inside your content, rendered with a number, a bullet, or none.

Unordered list

<ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Ordered list

<ol>
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet

Unstyled list

<ul class="list-unstyled">
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet