Bootstrap includes simple and easily customized typography for headings, body text, lists, and more.
All HTML headings classes .h1
through .h6
are also available.
h1. Bootstrap heading |
1.75rem (28px) |
h2. Bootstrap heading |
1.5rem (24px) |
h3. Bootstrap heading |
1.25rem (20px) |
h4. Bootstrap heading |
1.125rem (18px) |
h5. Bootstrap heading |
1.125rem (18px) |
h6. Bootstrap heading |
1rem (16px) |
<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>
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
When you need a heading to stand out, consider using a display-*
class.
6rem (96px) Display 1 |
5.5rem (88px) Display 2 |
4.5rem (72px) Display 3 |
3.5rem (56px) 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>
Make a paragraph stand out by adding .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<h2 class="subheading">h2 Bootstrap subheading</h2>
<h4 class="subheading">h4 Bootstrap subheading</h4>
<small class="subheading">Small text Bootstrap subheading</small>
Lorem ipsum dolor sit amet, consectetur adipiscing elit integer.
<blockquote class="blockquote">
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit integer.</p>
</blockquote>
Add .blockquote-reverse
for a blockquote with right-aligned content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote blockquote-reverse">
<p class="m-b-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>