Bootstrap 5 provides a powerful set of global typography rules. By simply including the Bootstrap CSS file, your text is instantly upgraded to use a "Native Font Stack", which guarantees your text looks beautiful and modern across all operating systems.
All HTML headings (<h1> through <h6>) are available with updated font styling. You can also use heading classes (like .h1) on other elements just in case you want a paragraph to look like a heading visually.
<h1>h1. Bootstrap heading</h1>
<!-- Using a class to match heading sizes -->
<p class="h1">h1. Bootstrap heading</p>Traditional headings limit how large your text can get. If you need text to truly stand out—for instance, in a large hero banner—Bootstrap offers Display Headings (.display-1 to .display-6). These are much larger and feature a thinner, more elegant font weight.
<h1 class="display-1">Display 1</h1>
<h1 class="display-6">Display 6</h1>Make a paragraph stand out by adding the .lead class. It slightly increases the font size and gives the text a lighter weight. This is widely used for introductory sentences at the top of an article.
This is a lead paragraph. It immediately draws the user's eye and provides a quick summary of the content below.
This is a regular paragraph. Notice it is smaller and bolder than the lead paragraph above.
<p class="lead">
This is a lead paragraph...
</p>For quoting blocks of content from another source, use the .blockquote class. You can optionally include a <figcaption> wrapped in a .blockquote-footer to name the source.
A well-known quote, contained in a blockquote element.
<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>Bootstrap includes styling for traditional HTML inline typography tags. It adds nice background colors to marked text and formats abbreviations correctly.
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>Deleted text.</del></p>