Contextual Badges
Use the .badge
class, followed by.badge-{color}
class within element to
create primary 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
class with .badge-light-{color}
to add light effect to
your badge.
Primary
Secondary
Success
Danger
Warning
Info
Dark
Badges With Icons
Primary
Secondary
Success
Danger
Warning
Info
Info
Link Badge
Use <a>
tag inside your .badge
to create a badge with icon
Block Badge
Use .d-block
class with .badge
, to display badge as a block element.
Badge