Basic Pill Badges
Use the .badge-pillmodifier class to make badges more rounded(with a larger border-radius and additional horizontal padding).
Primary
Secondary
Success
Info
Warning
Danger
Pill Badges Light
Use the .badge-pillclass with .badge.badge-light-{colorName}class to create pill badges with light colored background options.
Primary
Secondary
Success
Info
Warning
Danger
Glow Badges
Use class .badge-glowto add glow effect with badges.
Primary
Secondary
Success
Info
Warning
Danger
Pill Badges With Icons
Primary
Secondary
Success
Danger
Info
Warning
Pill Badges as Notification
Use class .badge-upwithin .position-relativeclass to add badges as notification.
4
5
6
Custom Badge Circle
Use .badge-circleto add badges with circle and use .badge-circle-{colorName}to create circle badges with colored background options. For different sizing variations,use .badge-circle-{lg/sm}along with .badge-circle.
Custom Badge Circle with Light Background
Use .badge-circle-light-{colorName}along with .badge-circleclass to create circle badges with light colored background options.
