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>Blockquote footer class
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>
