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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="">
    <title>Bootstrap Typography Example</title>
        /* Custom style for better visualization */
        body {
            padding: 20px;

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

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

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
Demonstrating an Example of Typography Classes in Bootstrap

Further Reading

Evolution of JavaScript from ES1 to ES2020

Introduction to HTML DOM Methods in JavaScript

JavaScript Practice Exercise

Understanding Document Object Model (DOM) in JavaScript

Creating Classes in JavaScript

Bootstrap Frequently Asked Questions

Most Popular Bootstrap Interview Questions and Answers