Bootstrap 5 Badges
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.
Steps To Create Bootstrap 5 Badges
-
Add
.badgei.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}
Example
This is primary Badge
This is secondary Badge
Simple Badge
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Badge
This is primary Badge
This is secondary Badge
This is success Badge
This is warning Badge
This is danger Badge
Code Explanation
Note: In this example, the badge concept is used to create additional information with respect to existing content.
Badge Contextual Classes
To change the background color of badge, use one of the contextual classes(badge-*).
Example
This is primary Badge
This is secondary Badge
This is success Badge
This is warning Badge
This is danger Badge
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Contextual Badge
Code Explanation
Note: In this example, badge contextual classes have been used to change the background color of the badge.
Pill Badges
Badges can be created more rounded with a larger border-radius using the .rounded-pill utility class.
Example
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Pill Badge
Code Explanation
Note: Pill badges are more rounded having a larger border radius.
Bootstrap 5 Badge Inside Button
Bootstrap 5 badge can be placed inside the button. Let us see it with an example.
Example
General Syntax
Try it nowSource Code
Source Code : Output
Badge With Button
Code Explanation
Note: In this example, bootstrap 5 badges are placed inside the button.