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 >
< 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 >
< 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
Last Updated :
27 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...