Primary Badge
Use the .badge
class, followed by.badge-primary
class within element to create primary badge.
Secondary Badge
Use the .badge
class, followed by.badge-secondary
class within element to create secondary badge.
Success Badge
Use the .badge
class, followed by.badge-success
class within element to create success badge.
Danger Badge
Use the .badge
class, followed by.badge-danger
class within element to create danger badge.
Warning Badge
Use the .badge
class, followed by.badge-warning
class within element to create warning badge.
Info Badge
Use the .badge
class, followed by.badge-info
class within element to create info badge.
Light Badge
Use the .badge
class, followed by.badge-light
class within element to create light badge.
Dark Badge
Use the .badge
class, followed by.badge-dark
class within element to create dark badge.
Custom Pink Badge
Use the .badge
class, followed by.bg-pink
class within element to create pink badge.
Icons Badges
Square Icon Badge
Use the .badge
class, followed by.badge-square
class to square bordered badge.
Secondary Icon Badge
Use the .badge
class, followed by.badge-secondary
class within element to create secondary badge.
Round Icon Badge
Use the .badge
class, followed by.round
class for round warning badge.
Danger Icon Badge
Use the .badge
class, followed by.badge-danger
class within element to create danger badge.
Square Icon Badge
Use the .badge
class, followed by.badge-square
class to square bordered badge.
Round Icon Badge
Use the .badge
class, followed by.round
class for round warning badge.
Bordered Badges
Use the .badge-bordered
with class .badge
. Also use .border-COLOR
class to add border and use .COLOR
for text color