Bootstrap 4 Badges
Bootstrap 4 badges are used to provide additional information to the respective content. Please keep in mind that badges scale up to match the size of the immediate parent element using relative font size emp units.
Contextual Badges
To provide the additional appearance of the available badge, please add one of the contextual classes (.badge-*) to change the badge color.
Example
Source Code
<div class="container mt-4">
<p>This is a success badge:
<span class="badge badge-success">Success</span>
</p>
<p>This is a danger badge:
<span class="badge badge-danger">Danger</span>
</p>
<p>This is a warning badge:
<span class="badge badge-warning">Warning</span>
</p>
</div>
Source Code: Output
This is a success badge: Success
This is a danger badge: Danger
This is a warning badge: Warning
Note:Badge, contextual classes are used to provide different color to the badge.These contextual class (badge-*) is used along with .badge.
Pill Badges
To create pill badge, follow the below given steps
-
Add
.badgefollowed by.badge-pillto the<span>element base class. -
Add one of the badge contextual classes to the
<span>element base class. -
Followings are the predefined badge contextual classes:
.badge-primary,.badge-success,.badge-secondary,.badge-warning,.badge-danger,.badge-info,.badge-light,.badge-dark.
Example
Source Code
<div class="container mt-4">
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-dark">Dark</span>
</div>
Source Code: Output
Note:To create more rounded badges, use .badge-pill modifier.It creates larger border-radius and extra horizontal padding.
Web Tutorials
