Use .badge.badge-{color} within element to create badge with different color options.
Use .badge.bg-light-{color} to create light badge with different color options.
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.
Use badge class in anchor tag for badge with link.
Use badge class in button tag for badge with button.
Built-in styles are included for placing badges in active states in pill navigations.
Use the .badge-pill modifier to make badges more rounded (with a larger border-radius).
Use the .badge-pill.bg-light-{color} to make light badges more rounded.
Use .badge.badge-pill.badge-{color} for colored pill badges and use i for icons.