Open In App

Bootstrap 5 Typography Display headings

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Typography Display headings is used to create a heading if it has a larger font size and lighter font weight than a regular heading. Classes are available from .display-1 to .display-6.

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.

Syntax:

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

Example 1: In this example, we will use all the display heading classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN-->
    <link rel="stylesheet" 
          href=
          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

Bootstrap 5 Typography Display headings

Example 2: Let us see another example of display classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN-->
    <link rel="stylesheet" 
          href=
          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>


Output:

Bootstrap 5 Typography Display headings

Bootstrap 5 Typography Display headings

Reference: https://getbootstrap.com/docs/5are.0/content/typography/#display-headings



Last Updated : 27 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads