Typography
Bootstrap we are having some tags which we can use in HTML .
1. Heading Tags - We are having h1-h6 heading tags each having different font-weight.
Let’s have an example :-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example </title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My Name is Manish</h1>
<h2>My Name is Manish </h2>
<h3>My Name is Manish </h3>
<h4>My Name is Manish </h4>
<h5>My Name is Manish </h5>
<h6>My Name is Manish </h6>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
My Name is Manish
My Name is Manish
My Name is Manish
My Name is Manish
My Name is Manish
My Name is Manish
2. Display Tags- We are having 4 display tags .
Let’s have an example :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>bootstrap 5 Example </title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="display-1">My Name is Manish </h1>
<h2 class="display-2">My Name is Manish </h2>
<h3 class="display-3">My Name is Manish </h3>
<h4 class="display-4">My Name is Manish </h4>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
My Name is Manish
My Name is Manish
My Name is Manish
My Name is Manish
There are many more class and tags in Bootstrap . Let’s notice their name and description :-
| Class | Description |
|---|
| .font-weight-bold | Bold text |
| .font-weight-bolder | Bolder text |
| .font-italic | Italic text |
| .font-weight-light | Light weight text |
| .font-weight-lighter | Lighter weight text |
| .font-weight-normal | Normal text |
| .lead | Makes a paragraph stand out |
| .small | Indicates smaller text (set to 85% of the size of the parent) |
| .text-left | Indicates left-aligned text |
| .text-*-left | Indicates left-aligned text on small, medium, large or xlarge screens |
| .text-break | Prevents long text from breaking layout |
| .text-center | Indicates center-aligned text |
| .text-*-center | Indicates center-aligned text on small, medium, large or extralarge screens |
