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.
<!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">
w3wiki
</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:
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.
<!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">
w3wiki
</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:
Reference: https://getbootstrap.com/docs/5are.0/content/typography/#display-headings
Bootstrap 5 Typography Display headings
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 :
Currently Active Property:
Class:"display-1"
Syntax:
<p class="display-*">
...
</p>
Contact Us