Contextual
Use the .badge class, followed by.badge-pill with
.badge-{color}class within element to create contextual pill badge.
Primary
Secondary
Success
Danger
Warning
Info
Dark
Glow Badges
Use class .badge-glow to add glow effect to contextual badge.
Primary
Secondary
Success
Danger
Warning
Info
Dark
Light Badges
Use class .badge-pill class with .badge.badge-light-{color} to add light
effect to your badge.
Primary
Secondary
Success
Danger
Warning
Info
Dark
Pill Badges as Notification
Use .badge-up to set pill badge to higher than other text. So that it can work with
notifications also.
4
5
6
Badge Pill Link
Use class .badge.badge-pill with <a> tag to make your badge a link.
Block Badge Pill
Use .d-block with .badge-pill to display your badge as block level element.
Block Badge Pill