Secondary Pill Badges
Use the .badgeclass, followed by.badge-pillwith .badge-secondaryclass within element to create default pill badge.
Primary Pill Badges
Use the .badgeclass, followed by.badge-pillwith .badge-primaryclass within element to create primary pill badge.
Success Pill Badges
Use the .badgeclass, followed by.badge-pillwith .badge-successclass within element to create success pill badge.
Danger Pill Badges
Use the .badgeclass, followed by .badge-pillwith .badge-dangerclass within element to create danger pill badge.
Info Pill Badges
Use the .badgeclass, followed by .badge-pillwith .badge-infoclass within element to create info pill badge.
Warning Pill Badges
Use the .badgeclass, followed by .badge-pillwith .badge-warningclass within element to create warning pill badge.
Glow Badges
Use class .badge-glowto add glow effect to your badge
Badge Pills With Icons
Pill Badges as Notification
Use .badge-upto 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-pillwith <a>tag to make your badge a link
Badge Pill Dropup
wrap your .badgewith .dropupto make your badge a dropup
Block Badge Pill
use .blockwith .badge-pillto display your badge as block level element
Badge Pill Sizes
Use classes badge-{xl|lg|md|sm}to change size of a badge