Bootstrap 5 Badge Headings – GeeksforGeeks
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
|
|
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
|
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/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.
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
|
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/badge/#headings
Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.