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