Bootstrap 5 Typography Display headings
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
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
Reference: https://getbootstrap.com/docs/5are.0/content/typography/#display-headings
Please Login to comment...