Bootstrap badges are used to assign additional information to the content such as warning messages, notifications, headings, etc. It scales up to match the size of the immediate parent element using relative font size emp
units.
Materialize Tutorial New
Bulma Tutorial New
Follow the given below step to create badges of Bootstrap 5 .
.badge
class to the <span>
element base class.
badge-*
) class to the <span>
element to provide different background color of the badges.
Note: Here, *
specifies one of from the followings:{ primary | secondary | success | danger | bg-warning | bg-info | bg-light | bg-dark }
General Syntax
<span class="badge badge-*">Badge</span>
Source Code
<h3>Result <span class="badge bg-secondary">New</span></h3>
<h3>Score <span class="badge bg-secondary">Upcoming</span></h3>
Try it yourself
Source Code : Output
Note: Badges in Bootstrap provides an additional information with respect to the existing content.
To change the background color of badge, use one of the contextual classes(badge-*
).
Materialize CSS New
Bulma CSS New
General Syntax
<span class="badge bg-*">Primary</span>
Source Code
<span class="badge bg-primary">Primary Badge</span>
<span class="badge bg-secondary">Secondary Badge</span>
Try it yourself
Source Code : Output
Note: In this example, badge contextual classes have been used to change the background color of the badge.
Badges can be created more rounded with a larger border-radius using the .rounded-pill
utility class.
PHP Tutorial New
Python Tutorial New
General Syntax
<span class="badge badge-pill bg-*">Primary</span>
Source Code
<span class="badge badge-pill bg-primary">Pill Primary Badge</span>
<span class="badge badge-pill bg-secondary">Pill Secondary Badge</span>
Try it yourself
Source Code : Output
Note: Pill badges are more rounded having a larger border radius.
Badges can be placed inside the button. Let us see it with an example.
General Syntax
<button type="button" class="btn btn-*">
Badge Notification <span class="badge badge-*">N</span>
</button>
Source Code
<button type="button" class="btn btn-primary">
Notification <span class="badge badge-light">4</span>
</button>
Try it yourself
Source Code : Output