Utilizor
HomeBootstrap 5 BasicsBS5 Typography

BBS5 Typography

Learn about Bootstrap 5 typography and text utilities.

BS5 Typography

Bootstrap 5 default settings (Bootstrap Reboot):

  • Global font-size is 1rem (typically 16px).
  • Line-height is 1.5.
  • Font-family is strictly native font stack (system fonts).
  • <p> elements have margin-top: 0 and margin-bottom: 1rem.

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight). There are six classes to choose from: .display-1 to .display-6.

Examples

Headings h1-h6

html/css

Standard HTML headings styled by Bootstrap.

<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>

Display Headings

html/css

Larger, more prominent 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>

Text Formatting

html/css

Standard HTML formatting tags.

<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

html/css

Styling quotes.

<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>

Test Your Knowledge

1. What is the default font-size in Bootstrap 5?

2. Which class is used for display headings?