Bootstrap 5 Typography Display headings

Last Updated : 02 Apr, 2024

Bootstrap 5 Typography’s Display headings feature classes from .display-1 to .display-6, offering larger font sizes and lighter weights, enhancing content hierarchy and readability, and making headings more visually appealing and structured.

Typography Display headings Classes:

display-*: This class is used to display the heading.

Note: The * can vary between 1 to 6. As, from bigger to smaller.

Try it :

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Display

Currently Active Property:

Class:"display-1"

Syntax:

<p class="display-*">
    ...
</p>

Example of Bootstrap 5 Typography Display headings

Example 1: In this example, Bootstrap 5 Typography introduces display headings for impactful text styles. Ranging from display-1 to display-6, they offer varying sizes for emphasizing content in web pages.

HTML

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap CDN-->
        <link
            rel="stylesheet"
            href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
            crossorigin="anonymous"
        />
    </head>

    <body class="m-2">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>
            Bootstrap5 Typography display headings
        </h3>

        <p class="display-1">
            GeekforGeeks display-1
        </p>
        <p class="display-2">
            GeekforGeeks display-2
        </p>
        <p class="display-3">
            GeekforGeeks display-3
        </p>
        <p class="display-4">
            GeekforGeeks display-4
        </p>
        <p class="display-5">
            GeekforGeeks display-5
        </p>
        <p class="display-6">
            GeekforGeeks display-6
        </p>
    </body>
</html>

Output:

Bootstrap 5 Typography Display headings

Example 2: In this example, Bootstrap 5 Typography, display headings, from display-1 to display-5, provide impactful text styles for emphasizing content like GFG, JAVA, C++, CSS, PYTHON.

HTML

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap CDN-->
        <link
            rel="stylesheet"
            href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
            crossorigin="anonymous"
        />
    </head>

    <body class="m-2">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>
            Bootstrap5 Typography display headings
        </h3>
        <p class="display-1">GFG</p>
        <p class="display-2">JAVA</p>
        <p class="display-3">C++</p>
        <p class="display-4">CSS</p>
        <p class="display-5">PYTHON</p>
    </body>
</html>