Bootstrap 5 Badge Headings
Last Updated :
16 Nov, 2022
Badge headings can be used to label the latest information about the headings. The size of badges scales in accordance with the heading size. It just matches the size of the parent element (uses relative units). So, you can directly use the badge class inside any tag (like span) whose parent is the heading tag. If you want any specific color for the badge, you can use contextual classes.
Badges Headings Class: There is no class for the Badge heading, we just need to use the badge class on header elements.
Syntax:
<h1> ...
<span class="badge ...">...</span>
</h1>
Below example illustrate the Bootstrap 5 Badge Headings:
Example 1: Here, in this example, you can see that we have used the badge class inside the span tag whose parent element is the heading tags. Also, we have used the background color class bg-primary so you can see the badge.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
<title>Bootstrap 5 Badge Headings</title>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<h2 class="text-center">Bootstrap 5 Badge Headings</h2>
<h1>
GeeksforGeeks
<span class="badge bg-primary">h1 Badge </span>
</h1>
<h2>
GeeksforGeeks
<span class="badge bg-primary">h2 Badge </span>
</h2>
<h3>
GeeksforGeeks
<span class="badge bg-primary">h3 Badge </span>
</h3>
<h4>
GeeksforGeeks
<span class="badge bg-primary">h4 Badge </span>
</h4>
<h5>
GeeksforGeeks
<span class="badge bg-primary">h5 Badge </span>
</h5>
<h6>
GeeksforGeeks
<span class="badge bg-primary">h5 Badge </span>
</h6>
</center>
</body>
</html>
|
Output:
Bootstrap 5 Badge Headings
Example 2: The background color of heading badges can be changed by using the contextual classes along with the badge class.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
<title>Bootstrap 5 Badge Headings</title>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Badge Headings</strong>
<h4>
GeeksforGeeks
<span class="badge bg-primary">h1 Badge </span>
</h4>
<h4>
GeeksforGeeks
<span class="badge bg-secondary">h2 Badge </span>
</h4>
<h4>
GeeksforGeeks
<span class="badge bg-success">h3 Badge </span>
</h4>
<h4>
GeeksforGeeks
<span class="badge bg-warning">h4 Badge </span>
</h4>
<h4>
GeeksforGeeks
<span class="badge bg-danger">h5 Badge </span>
</h4>
<h4>
GeeksforGeeks
<span class="badge bg-info">h5 Badge </span>
</h4>
</center>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/badge/#headings
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...