Typography
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Headings
| Heading | Example |
|---|---|
|
|
h1. Bootstrap heading |
|
|
h2. Bootstrap heading |
|
|
h3. Bootstrap heading |
|
|
h4. Bootstrap heading |
|
|
h5. Bootstrap heading |
|
|
h6. Bootstrap heading |
<!--
headings -->
<h1>h1.
Bootstrap heading</h1>
<h2>h2.
Bootstrap heading</h2>
<h3>h3.
Bootstrap heading</h3>
<h4>h4.
Bootstrap heading</h4>
<h5>h5.
Bootstrap heading</h5>
<h6>h6.
Bootstrap heading</h6>
Customizing headings
Fancy display heading With faded secondary text
<!-- Customizing headings
-->
<h3>
Fancy display heading
<small
class="text-muted">With faded
secondary text</small>
</h3>
Display headings
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<!-- display headings
-->
<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>
<h1 class="display-5">Display
5</h1>
<h1 class="display-6">Display
6</h1>
Body text
In ultricies fermentum aliquet. Pellentesque dui magna, condimentum non ullamcorper at, cursus in sem. Nunc condimentum, purus ac sagittis ultricies, metus leo pharetra mi, non vehicula felis elit et nisi. Etiam venenatis commodo libero, vel ullamcorper nibh lobortis vel. Aliquam auctor porta tortor, nec consequat nibh finibus a. Sed ultrices risus eget iaculis luctus. Mauris vel gravida magna.
<!-- body
text -->
<p>In ultricies
fermentum aliquet. Pellentesque dui magna, condimentum non
ullamcorper at, cursus in sem. Nunc condimentum, purus ac
sagittis ultricies, metus leo pharetra mi, non vehicula felis
elit et nisi. Etiam venenatis commodo libero, vel ullamcorper
nibh lobortis vel. Aliquam auctor porta tortor, nec consequat
nibh finibus a. Sed ultrices risus eget iaculis luctus. Mauris
vel gravida magna.</p>
Lead text
This is a lead paragraph. It stands out from regular paragraphs.
<!-- body text -->
<p class="lead">This is a
lead paragraph. It stands out from regular
paragraphs.</p>
Inline text 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.
<!-- inline 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
A well-known quote, contained in a blockquote element.
<!-- blockquote -->
<blockquote
class="blockquote">
<p>A well-known
quote, contained in a blockquote element.</p>
</blockquote>
Naming a source
A well-known quote, contained in a blockquote element.
<!-- naming a source
-->
<figure>
<blockquote
class="blockquote">
<p>A well-known
quote, contained in a blockquote element.</p>
</blockquote>
<figcaption
class="blockquote-footer">
Someone famous in <cite
title="Source Title">Source
Title</cite>
</figcaption>
</figure>
Center Alignment
A well-known quote, contained in a blockquote element.
<!-- alignment -->
<figure
class="text-center">
<blockquote
class="blockquote">
<p>A well-known
quote, contained in a blockquote element.</p>
</blockquote>
<figcaption
class="blockquote-footer">
Someone famous in <cite
title="Source Title">Source
Title</cite>
</figcaption>
</figure>
Right Alignment
A well-known quote, contained in a blockquote element.
<!-- alignment -->
<figure
class="text-end">
<blockquote
class="blockquote">
<p>A well-known
quote, contained in a blockquote element.</p>
</blockquote>
<figcaption
class="blockquote-footer">
Someone famous in <cite
title="Source Title">Source
Title</cite>
</figcaption>
</figure>
List Unstyled
- 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
<!-- lists -->
<ul class="list-unstyled">
<li>Lorem ipsum
dolor sit amet</li>
<li>Consectetur
adipiscing elit</li>
<li>Integer
molestie lorem at massa</li>
<li>Facilisis in
pretium nisl aliquet</li>
<li>Nulla
volutpat aliquam velit
<ul>
<li>Phasellus
iaculis neque</li>
<li>Purus
sodales ultricies</li>
<li>Vestibulum
laoreet porttitor sem</li>
<li>Ac tristique
libero volutpat at</li>
</ul>
</li>
<li>Faucibus
porta lacus fringilla vel</li>
<li>Aenean sit
amet erat nunc</li>
<li>Eget
porttitor lorem</li>
</ul>
Inline
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<!-- list inline -->
<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>
Description list alignment
- 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.
<!-- list alignment -->
<dl class="row">
<dt class="col-sm-3">Description
lists</dt>
<dd class="col-sm-9">A
description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum
id ligula porta felis euismod semper eget lacinia odio sem nec
elit.</p>
<p>Donec id
elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada
porta</dt>
<dd class="col-sm-9">Etiam porta
sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3
text-truncate">Truncated
term is truncated</dt>
<dd class="col-sm-9">Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested
definition list</dt>
<dd class="col-sm-8">Aenean
posuere, tortor sed cursus feugiat, nunc augue blandit
nunc.</dd>
</dl>
</dd>
</dl>