Badges
Badges
Basic
Add any of the below mentioned modifier classes to change the appearance of a badge.
DefaultPrimarySuccessInfoWarningDanger
With Gradient
Use .badge-gradient-*as prefix along with contextual colors to applied gradient style.
PrimarySuccessInfoWarningDanger
Pill
Use the .badge-pillmodifier class to make badges more rounded(with a larger border-radiusand additional horizontal padding). Useful if you miss the badges from v3.
DefaultPrimarySuccessInfoWarningDanger
Pill With Gradient
Use .badge-gradient-*as prefix along with contextual colors to applied gradient style.
PrimarySuccessInfoWarningDanger
Links
Using the contextual .badge-*classes on an <a>element quickly provide actionablebadges with hover and focus states.
Sizing
Customize badge size using .badge-sm,.badge-lg& .badge-xl
Badge-xlBadge-lgBadge-mdBadge-sm
Status Badge
Use .statusalong with contextual class to create status badge
List Media Status
Status badge can also applied to list-media as below