Secondary Pill Badges
Use the .badge class, followed by.badge-pill with
.badge-secondaryclass within element to create default pill badge.
Primary Pill Badges
Use the .badge class, followed by.badge-pill with
.badge-primaryclass within element to create primary pill badge.
Success Pill Badges
Use the .badge class, followed by.badge-pill with
.badge-successclass within element to create success pill badge.
Danger Pill Badges
Use the .badge class, followed by .badge-pill with
.badge-dangerclass within element to create danger pill badge.
Info Pill Badges
Use the .badge class, followed by .badge-pill with
.badge-infoclass within element to create info pill badge.
Warning Pill Badges
Use the .badge class, followed by .badge-pill with
.badge-warningclass within element to create warning pill badge.
Glow Badges
Use class .badge-glow to add glow effect to your badge
Light Badges
Use class .badge-pill class with .badge.badge-light-{colorName} to add light
effect to your badge.
Badge Pills With Icons
Pill Badges as Notification
Use .badge-up to set pill badge to higher than other text. So that it can work with notifications
also.
Icon Pill with Color Variations
Badge Pill Link
Use class .badge.badge-pill with <a> tag to make your badge a link
Badge Pill Dropup
wrap your .badge with .dropup to make your badge a dropup
Block Badge Pill
use .block with .badge-pill to display your badge as block level element
Badge Pill Sizes
Use classes badge-{xl|lg|md|sm} to change size of a badge