Bootstrap 5 Typography

Bootstrap 5 Default Settings

Bootstrap 5's default font-size is 16px, line-height is 1.5.

The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

Additionally, all <p> elements margin-top: 0 and margin-bottom: 1rem (16px).

<h1> - <h6>

Bootstrap defines styles for all HTML headings (h1 to h6). See the example below:

Example

<div class="container">
  <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>
</div>

You can also use the .h1 to .h6 classes to style elements:

Example

<div class="container">
  <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>
</div>

Display Headings

Bootstrap also provides four Display classes to control heading styles: .display-1, .display-2, .display-3, .display-4.

Example

<div class="container">
  <h1>Display Headings</h1>
  <p>Display headings can output larger, bolder text styles.</p>
  <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>
</div>

<small>

In Bootstrap 5, the HTML <small> element is used to create smaller, lighter text:

Example

<div class="container">
  <h1>Smaller Text Headings</h1>
  <p>The small element is used for smaller, lighter text:</p>       
  <h1>h1 Heading <small>Subheading</small></h1>
  <h2>h2 Heading <small>Subheading</small></h2>
  <h3>h3 Heading <small>Subheading</small></h3>
  <h4>h4 Heading <small>Subheading</small></h4>
  <h5>h5 Heading <small>Subheading</small></h5>
  <h6>h6 Heading <small>Subheading</small></h6>
</div>

<mark>

Bootstrap 5 defines the <mark> tag and .mark class with a yellow background and some padding:

Example

<div class="container">
  <h1>Highlighted Text</h1>    
  <p>Use the mark element to <mark>highlight</mark> text.</p>
</div>

<abbr>

Bootstrap 5 styles the HTML <abbr> element with a dotted border at the bottom of the text:

Example

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

<blockquote>

For quoted content, add the .blockquote class to <blockquote>:

Example

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

<dl>

Bootstrap 5 styles the HTML <dl> element as follows:

Example

<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

<code>

Bootstrap 5 styles the HTML <code> element as follows:

Example

<div class="container">
  <h1>Code Snippets</h1>
  <p>Place code elements within the code element:</p>
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> define sections of the document.</p>
</div>

<kbd>

Bootstrap 5 styles the HTML <kbd> element as follows:

Example

<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<pre>

Bootstrap 5 styles the HTML <pre> element as follows:

Example

<div class="container">
  <h1>Multiple Code Lines</h1>
  <p>For multiple lines of code, use the pre element:</p>
  <pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
  </pre>
</div>

More Typography Classes

The table below provides examples of more Bootstrap 5 typography classes: