Bootstrap 5 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.
.badge
i.e(badge class) together with contextual badge class like(.badge-secondary) to <span>
base class to create rectangular box i.e (badge).
General Syntax For Badge
<span class="badge badge-*">Badge</span>
Note:* Notify one of {primary|secondary|success|danger|bg-warning|bg-info|bg-light|bg-dark}
This is primary Badge
This is secondary Badge
Note: In this example, the badge concept is used to create additional information with respect to existing content.
To change the background color of badge, use one of the contextual classes(badge-*
).
This is primary Badge
This is secondary Badge
This is success Badge
This is warning Badge
This is danger Badge
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.
Note: Pill badges are more rounded having a larger border radius.
Bootstrap 5 badge can be placed inside the button. Let us see it with an example.
Note: In this example, bootstrap 5 badges are placed inside the button.