Primary Pill Badges
Use the .badge
class, followed by.badge-pill
with .badge-primary
class within element to create primary pill badge.
Secondary Pill Badges
Use the .badge
class, followed by.badge-pill
with .badge-secondary
class within element to create default pill badge.
Success Pill Badges
Use the .badge
class, followed by.badge-pill
with .badge-success
class within element to create success pill badge.
Danger Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-danger
class within element to create danger pill badge.
Warning Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-warning
class within element to create warning pill badge.
Info Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-info
class within element to create info pill badge.
Light Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-light
class within element to create light pill badge.
Dark Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-dark
class within element to create dark pill badge.
Custom Blue Grey Color Pill Badges
Use the .badge
class, followed by.bg-pink
class within element to create pink label.
Pill Badges With Glow effect
Primary Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-glow
class within element to create glow styled pill badge.
Secondary Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-glow
class within element to create glow styled pill badge.
Success Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-glow
class within element to create glow styled pill badge.
Danger Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-glow
class within element to create glow styled pill badge.
Warning Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-glow
class within element to create glow styled pill badge.
Info Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-glow
class within element to create glow styled pill badge.
Pill Badges with Icons
Primary Icon Pill
Secondary Icon Pill
Success Icon Pill
Square Danger Icon Pill
Square Warning Icon Label
Square Info Icon pill badge
Bordered Pill Badges
Primary Pill Badges
Use the .badge
class, followed by.badge-border
with .badge-primary
class within element to create primary pill badge.
Success Pill Badges
Use the .badge
class, followed by.badge-border
with .badge-success
class within element to create success pill badge.
Danger Pill Badges
Use the .badge
class, followed by .badge-border
with .badge-danger
class within element to create danger pill badge.