Bootstrap 5 Badge Headings

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.

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.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/badge/#headings