Secondary Pill Badges
Use the .badge
class, followed by.badge-pill
with .badge-secondary
class within element to create
default pill badge.
Primary Pill Badges
Use the .badge
class, followed by.badge-pill
with .badge-primary
class within element to create
primary 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.
Info Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-info
class within element to create
info pill badge.
Warning Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-warning
class within element to create
warning pill badge.
Custom Blue Grey Color Pill Badges
Use the .badge
class, followed by.bg-blue-grey
class
within element to create blue grey label.
Pill Badges With Glow effect
Secondary Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-glow
class within element to create
glow styled pill badge.
Primary 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.
Info 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.
Custom Blue Grey Color Pill Badges
Use the .badge
class, followed by .badge-pill
with .badge-glow
class within element to create
glow styled pill badge.
Square Pill Badges
For square pill badges, use .badge-square
class with .badge
class.
Secondary Square Pill
Square Primary Pill
Square Success Pill
Pill Badges with Icons
Secondary Icon Pill
Primary Icon Pill
Success Icon Pill
Square Danger Icon Pill
Square Info Icon pill badge
Square Warning Icon Label
Pill Badges with Dropdown
Secondary Pill with Dropdown
Primary Pill with Dropdown
Success Pill with Dropdown
Square Danger Pill with Dropdown
Square Info Pill with Dropdown
Square Warning Pill with Dropdown
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.
Info Pill Badges
Use the .badge
class, followed by .badge-border
with .badge-info
class within element to create
info pill badge.
Warning Pill Badges
Use the .badge
class, followed by .badge-border
with .badge-warning
class within element to create
warning pill badge.
Custom Brown Color Pill Badges
Use the .badge
class, followed by .badge-border
with .bg-blue
class within element to create blue
pill badge.
Pill Badges With Glow effect
Primary Pill Badges
Use the .badge
class, followed by .badge-border
with .badge-glow
class within element to create
glow styled pill badge.
Success Pill Badges
Use the .badge
class, followed by .badge-border
with .badge-glow
class within element to create
glow styled pill badge.
Danger Pill Badges
Use the .badge
class, followed by .badge-border
with .badge-glow
class within element to create
glow styled pill badge.
Info Pill Badges
Use the .badge
class, followed by .badge-border
with .badge-glow
class within element to create
glow styled pill badge.
Warning Pill Badges
Use the .badge
class, followed by .badge-border
with .badge-glow
class within element to create
glow styled pill badge.
Custom Brown Color Pill Badges
Use the .badge
class, followed by .badge-border
with .badge-glow
class within element to create
glow styled pill badge.
Square Pill
For square pill badges, use .badge-square
class with
.badge
class.