# Bootstrap Typography

1. **<mark>Introduction</mark>**  
    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.
    
2. **<mark>Headings</mark>**  
    Bootstrap includes basic styles for all HTML headings (`<h1>` through `<h6>`) and provides additional classes for more control.  
    i) HTML Headings
    
    ```xml
    <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.
    
    ```xml
    <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>
    ```
    
3. **<mark>Inline Text Elements</mark>**  
    Bootstrap styles basic inline HTML elements for text content.
    
    ```xml
    <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>
    ```
    
4. **<mark>Blockquotes</mark>**  
    For quoting blocks of content from another source within your document.  
    i) Basic Blockquote
    
    ```xml
    <blockquote class="blockquote">
      <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
    </blockquote>
    ```
    
    ii) Blockquote with Citation
    
    ```xml
    <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>
    ```
    
5. **<mark>Lists</mark>**  
    Bootstrap provides basic styles for ordered and unordered lists.  
    i) Unordered List
    
    ```xml
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
    </ul>
    ```
    
    ii) Ordered List
    
    ```xml
    <ol>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
    </ol>
    ```
    
6. **<mark>Text Utilities</mark>**  
    Bootstrap includes various utility classes to style your text quickly.  
    i) Alignment
    
    ```xml
    <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
    
    ```xml
    <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
    
    ```xml
    <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>
    ```
    
7. **<mark>Display Property</mark>**  
    Classes to set an element’s display property.
    
    ```xml
    <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>
    ```
    
8. **<mark>Responsive Font Sizes</mark>**  
    Bootstrap 5 provides utilities to adjust font size responsively.
    
    ```xml
    <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.