Bootstrap 5 Text/Typography

Default Typography Settings of Bootstrap 5

Default settings used in bootstrap as follows font-size of 1rem (16 by default) and the line height 1.5 also
elements have margin-top:0 and margin-bottom: 1rem

Bootstrap 5 Heading Classes

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

Bootstrap 5 Display 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>

Bootstrap 5 Secondary Text Class

Small Secondary text heading

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Bootstrap 5 mark element style

Bootstrap 5 will style and .mark will highlight the text with a yellow background color and some padding:

You can use the mark tag to highlight text. and use .text class

Bootstrap5 abbr classs

For making the text as dotted border and a cursor with question mark on hover, we can use tag . Add .initialism to an abbreviation for a slightly smaller font-size.

Bootstrap 5 blockquote class

For quoting blocks of content Wrap with element and add class .blockquote . Example below

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

For naming the source of the quote we can use .blockquote-footer

<p>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <p class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </p>

Bootstrap 5 dl ELement Style

<div class="container mt-3">
  <h1>Bootstrap 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>