Typography

Typography defines how text is presented to your users. It encompasses headings, paragraphs, font sizes, and more.

Headings

Create a variety of headings using <h1> through <h6>. Alternatively you can use the class variations (.h1 through .h6) to apply heading sizing to other elements.

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

h6 heading from class


<h1>h1 heading</h1>
<h2>h2 heading</h2> 
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>
<p class="h6">h6 heading from class</p>

Customizing headings

Faded secondary text

Create a sub-heading that is slightly smaller and somewhat faded for less emphasis.

h3 heading With faded secondary text


<h3>
	h3 heading
	<small class="text-muted">With faded secondary text</small>
</h3>

Display headings

When you need a heading to stand out, consider using a display heading, a larger heading style.

Display 1

Display 2

Display 3

Display 4


<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Paragraphs

Paragraphs are as straightforward as headings. Simply use the HTML element <p>. Additionally, you can make a paragraph stand out by adding the .lead class.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.


<p class="lead">
	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
<p>
	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 	
</p>

Customizing paragraphs

Inline content can be styled using common HTML 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>

Blockquotes

Quote blocks of content from another source using blockquotes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title


<blockquote class="blockquote">
	<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
	<footer class="blockquote-footer">
		Someone famous in <cite title="Source Title">Source Title</cite>
	</footer>
</blockquote>

Lists

Unstyled

Remove the default list-style and left margin on list items (immediate children only).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
Faucibus porta lacus fringilla vel


<ul class="list-unstyled">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Nulla volutpat aliquam velit
		<ul>
			<li>Phasellus iaculis neque</li>
			<li>Purus sodales ultricies</li>
		</ul>
	</li>
	<li>Faucibus porta lacus fringilla vel</li>
</ul>

Inline

Remove a list’s bullets, apply some margin and render list items horizontally instead of vertically with a combination of two classes, .list-inline and .list-inline-item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat


<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Colors Icons