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