Bootstrap Typography

Introduction
Bootstrap 5 provides a comprehensive suite of typography utilities to help developers create beautiful and responsive text elements. Here are the main features and classes related to typography in Bootstrap 5.

Headings
Bootstrap includes basic styles for all HTML headings (<h1> through <h6>) and provides additional classes for more control.
i) HTML Headings

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

ii) .display Classes
For larger headings, you can use display heading classes.

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

Inline Text Elements
Bootstrap styles basic inline HTML elements for text content.

 <p>You can use the <mark>mark element</mark> to highlight 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
For quoting blocks of content from another source within your document.
i) Basic Blockquote

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

ii) Blockquote with Citation

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

Lists
Bootstrap provides basic styles for ordered and unordered lists.
i) Unordered List

 <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetur adipiscing elit</li>
   <li>Integer molestie lorem at massa</li>
 </ul>

ii) Ordered List

 <ol>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetur adipiscing elit</li>
   <li>Integer molestie lorem at massa</li>
 </ol>

Text Utilities
Bootstrap includes various utility classes to style your text quickly.
i) Alignment

 <p class="text-start">Left aligned text.</p>
 <p class="text-center">Center aligned text.</p>
 <p class="text-end">Right aligned text.</p>

ii) Transformation

 <p class="text-lowercase">Lowercased text.</p>
 <p class="text-uppercase">Uppercased text.</p>
 <p class="text-capitalize">Capitalized text.</p>

iii) Font Weight and Italics

 <p class="fw-bold">Bold text.</p>
 <p class="fw-bolder">Bolder text.</p>
 <p class="fw-normal">Normal weight text.</p>
 <p class="fw-light">Light weight text.</p>
 <p class="fw-lighter">Lighter weight text.</p>
 <p class="fst-italic">Italic text.</p>
 <p class="fst-normal">Normal text.</p>

Display Property
Classes to set an element’s display property.

 <p class="d-none">Hidden text</p>
 <p class="d-inline">Inline text</p>
 <p class="d-inline-block">Inline-block text</p>
 <p class="d-block">Block text</p>

Responsive Font Sizes
Bootstrap 5 provides utilities to adjust font size responsively.

 <p class="fs-1">Font size 1</p>
 <p class="fs-2">Font size 2</p>
 <p class="fs-3">Font size 3</p>
 <p class="fs-4">Font size 4</p>
 <p class="fs-5">Font size 5</p>
 <p class="fs-6">Font size 6</p>

These classes and utilities make it easy to manage typography in your web projects with Bootstrap 5, ensuring consistency and responsiveness across different screen sizes.