Bootstrap 5 Typography Headings
Typography is a feature of Bootstrap for styling and formatting text content. It is used to create customized headings, inline subheadings, lists, and paragraphs, align, add more design-oriented font styles, and much more. Bootstrap support global settings for the font stack, Headings and Link styles to be used in the web app for every type of OS and Device to deliver the best user interface.
Headings: For heading, classes are available from [.h1 to .h6]. Heading classes help us create a font-style-like heading without the use of HTML heading tags.
Syntax:
<p class="h1">
...
</p>
Example 1: Let us see an example of Typography Headings.
HTML
<!DOCTYPE html><html> <head> <!-- Load Bootstrap --> <link rel="stylesheet" href= crossorigin="anonymous"></head> <body> <div class="container"> <h1 class="text-success"> GeeksforGeeks </h1> <h3>BootStrap 5 Typography Headings</h3> <div class="h1">GFG1</div> <div class="h2">GFG2</div> <div class="h3">GFG3</div> <div class="h4">GFG4</div> <div class="h5">GFG5</div> <div class="h6">GFG6</div> </div></body> </html> |
Output:
Example 2: Let us see another example of Typography Headings.
HTML
<!DOCTYPE html><html> <head> <!-- Load Bootstrap --> <link rel="stylesheet" href= crossorigin="anonymous"></head> <body> <div class="container"> <div class="h1 text-success"> GeeksforGeeks </div> <div class="h2"> BootStrap 5 Typography Headings </div> <br> <div class="h4 text-info"> welcome in java tutorial of GeeksforGeeks </div> <div class="h6"> Java is one of the most popular and widely used programming language and platform. A platform is an environment that helps to develop and run programs written in any programming language. </div> </div></body> </html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/content/typography/#headings
Please Login to comment...