Typography

1. Typography Overview

Typography is a crucial aspect of web design. Bootstrap provides a suite of typography classes to ensure consistency and readability across your web pages.

2. Headings

Bootstrap includes classes for creating different levels of headings:

• h1: Largest heading
• h2: Second-largest heading
• h3 to h6: Smaller headings

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
                

3. Display Headings

Use .display-1 to .display-6 for larger, more prominent headings:

<h1 class="display-1">Display Heading</h1>
                

4. Lead Paragraphs

Enhance a paragraph with a lead class:

<p class="lead">This is a lead paragraph.</p>
                

5. Inline Text Elements

• <mark>: Highlights text
• <del>: Strikes through text
• <strong>: Bold text

<mark>Highlighted Text</mark>
<del>Deleted Text</del>
                

6. Text Alignment

Align text using classes like .text-start, .text-center, and .text-end:

<p class="text-center">This is centered text.</p>
                

7. Text Colors

Change text color with utility classes like .text-primary, .text-success, and .text-danger:

<p class="text-primary">Primary Text</p>
                

8. Text Decoration

Modify text decoration with classes like .text-decoration-underline and .text-decoration-none:

<p class="text-decoration-underline">Underlined Text</p>
                

9. Font Sizes

Bootstrap provides utility classes for font sizes:

• .fs-1: Largest font size
• .fs-6: Smallest font size

<p class="fs-1">Large Text</p>
                

10. Line Heights

Control line heights with classes like .lh-sm, .lh-base, and .lh-lg:

<p class="lh-lg">This text has a large line height.</p>
                

11. Blockquotes

Style blockquotes with Bootstrap:

<blockquote class="blockquote">
    <p>This is a blockquote.</p>
</blockquote>
                

12. Lists

Bootstrap supports styled lists:

• Ordered Lists: Use <ol>
• Unordered Lists: Use <ul>

13. Wrapping Text

Control text wrapping with classes like .text-truncate:

<p class="text-truncate">This text will be truncated.</p>
                

14. Abbreviations

Use <abbr> for abbreviations with tooltips:

<abbr title="HyperText Markup Language">HTML</abbr>