Typography
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Headings
All HTML headings, <h1>
through <h6>
, are available.
Heading | Example |
---|---|
|
h1. Bootstrap heading |
|
h2. Bootstrap heading |
|
h3. Bootstrap heading |
|
h4. Bootstrap heading |
|
h5. Bootstrap heading |
|
h6. Bootstrap heading |
.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.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<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>
.title
, for when you want some bolder titles with a different font family.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<h1 class="title">h1. Bootstrap heading</h1>
<h2 class="title">h2. Bootstrap heading</h2>
<h3 class="title">h3. Bootstrap heading</h3>
<h4 class="title">h4. Bootstrap heading</h4>
<h5 class="title">h5. Bootstrap heading</h5>
<h6 class="title">h6. Bootstrap heading</h6>
Customizing headings
Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
Blockquotes
For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote">
around any HTML as the quote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Naming a source
Add a <footer class="blockquote-footer">
for identifying the source. Wrap the name of the source work in <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<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>
Alignment
Use text utilities as needed to change the alignment of your blockquote.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-center">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-right">
<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>