Example of Typography Classes in Bootstrap

Here, I will demonstrate an Example of Typography Classes in Bootstrap.

The following code shows an example of applying different Bootstrap typography classes to text elements, including headings, paragraphs, and text alignment classes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Bootstrap Typography Example</title>
    <style>
        /* Custom style for better visualization */
        body {
            padding: 20px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1 class="display-4">Bootstrap Typography</h1>

        <!-- Headings -->
        <h2 class="h2">Heading 2</h2>
        <h3 class="h3">Heading 3</h3>
        <h4 class="h4">Heading 4</h4>
        <h5 class="h5">Heading 5</h5>
        <h6 class="h6">Heading 6</h6>

        <!-- Paragraphs -->
        <p class="lead">This is a lead paragraph with larger and bolder text.</p>
        <p>This is a regular paragraph with normal-sized text.</p>

        <!-- Text Alignment Classes -->
        <p class="text-left">Left-aligned text.</p>
        <p class="text-center">Center-aligned text.</p>
        <p class="text-right">Right-aligned text.</p>
        <p class="text-justify">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p class="text-nowrap">No wrap text. This text will not wrap to the next line.</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In this example.

Different heading classes (h2 to h6) are used to style various headings.
The lead class is applied to a paragraph to make it stand out with larger and bolder text.
Text alignment classes (text-left, text-center, text-right, text-justify, text-nowrap) are applied to paragraphs to demonstrate different text alignment options.

**Demonstrating an Example of Typography Classes in Bootstrap**

Further Reading