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.
Process to create Bootstrap 4 badges :
.badge
class along with any contextual class (like .badge-primary
)to the
base class..badge-primary
, .badge-success
, .badge-secondary
, .badge-warning
,
.badge-danger
, .badge-info
, .badge-light
, .badge-dark
.
Note:
Add,.badge
& .badge-*
contextual classes to the <span>
base class.
Attention: Badge is used to provide additional information about the specific content hence widely used.
To provide the additional appearance of the available badge, please add one of the contextual classes (.badge-*) to change the badge color.
Note:Badge, contextual classes are used to provide different color to the badge.These contextual class (badge-*
) is used along with .badge
.
To create pill badge,follow the below given steps
.badge
followed by .badge-pill
to the <span>
element base class.
<span>
element base class.
.badge-primary
, .badge-success
, .badge-secondary
, .badge-warning
,
.badge-danger
, .badge-info
, .badge-light
, .badge-dark
.
Note:To create more rounded badges,use .badge-pill modifier.It creates larger border-radius and extra horizontal padding.
To provide actionable badge, you have to add contextual class .badge-*
to the <a>
element base class.This provides actionable badges with hover and focus states.
Note: Bootstrap 4 actionable badges and pills specify hyperlink action. It shows internal or external link.