Bootstrap 5 Typography Headings
Last Updated :
03 Apr, 2024
Bootstrap’s Typography feature facilitates text styling and formatting, enabling customization of headings, inline subheadings, lists, and paragraphs. It supports global settings for font stack, Headings, and Link styles, ensuring optimal user interface across diverse operating systems and devices.
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 of Bootstrap 5 Typography Headings
Example 1: In this example we showcase Bootstrap 5 Typography Headings, utilizing classes from h1 to h6 to style headings with increasing font sizes and weight.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
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: In this example we demonstrates Bootstrap 5 typography headings styled with various classes. It showcases headings with different colors and text sizes, presenting content hierarchy and emphasis effectively.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...