Basic Badges
Use .badge.badge-{color} within element to create badge with different color options.
Light Badges
Use .badge.bg-light-{color} to create light badge with different color options.
Badges with Icons
Use .badge.badge-{color} for badge colors and use i for icons.
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
Badge with Link
Use badge class in anchor tag for badge with link.
Badge with button
Use badge class in button tag for badge with button.
Adapts to active nav states
Built-in styles are included for placing badges in active states in pill navigations.
Basic Pill Badges
Use the .badge-pill modifier to make badges more rounded (with a larger border-radius).
Light Pill Badges
Use the .badge-pill.bg-light-{color} to make light badges more rounded.
Pill Badges with Icons
Use .badge.badge-pill.badge-{color} for colored pill badges and use i for icons.
