Badges
Badges
Basic
Add any of the below mentioned modifier classes to change the appearance of a badge.
With Gradient
Use .badge-gradient-*as prefix along with contextual colors to applied gradient style.
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.
Pill With Gradient
Use .badge-gradient-*as prefix along with contextual colors to applied gradient style.
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
Status Badge
Use .statusalong with contextual class to create status badge
List Media Status
Status badge can also applied to list-media as below