Secondary Badge
Use the .badge class, followed by.badge-secondaryclass
within element to create secondary badge.
Primary Badge
Use the .badge class, followed by.badge-primaryclass
within element to create primary badge.
Success Badge
Use the .badge class, followed by.badge-successclass
within element to create success badge.
Danger Badge
Use the .badge class, followed by.badge-dangerclass
within element to create danger badge.
Info Badge
Use the .badge class, followed by.badge-infoclass
within element to create info badge.
Warning Badge
Use the .badge class, followed by.badge-warningclass
within element to create warning badge.
Custom Blue Grey Color Badge
Use the .badge class, followed by.bg-blue-greyclass
within element to create blue grey badge.
Badges with Icons
Secondary Badge with Icon
Use the .badge class, followed by.badge-secondaryclass
within element to create secondary badge.
Square Primary Badge with Icon
Use the .badge class, followed by.badge-square class for square bordered badge.
Round Success Badge with Icon
Use the .badge class, followed by.round class for round bordered badge.
Danger Badge with Icon
Use the .badge class, followed by.badge-dangerclass
within element to create danger badge.
Square Info Badge with Icon
Use the .badge class, followed by.badge-squareclass
for square badge.
Round Warning Badge with Icon
Use the .badge class, followed by.round class for round bordered.
Badges with Only Icons
Secondary Icon Badge
Use the .badge class, followed by.badge-secondaryclass
within element to create secondary badge.
Square Icon Badge
Use the .badge class, followed by.badge-squareclass
to square bordered 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-dangerclass
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
Primary Badge
Success Badge
Danger Badge
Info Badge
Warning Badge
Custom Color Badge
Bordered Badges with Icons
Default Primary Badge
Square Success Badge
Round Danger Badge
Default Info Badge
Square Warning Badge
Round Custom Badge
Bordered Icon badges
Default Primary Badge
Square Success Badge
Round Danger Badge
Default Info Badge
Square Warning Badge
Round Custom Badge
Striped Badges
Use the .badge-striped with class .badge for striped styled badges. Also use .border-left-COLOR or .border-right-COLOR class to add border to left and
right.
Primary Badge
Success Badge
Danger Badge
Info Badge
Warning Badge
Custom Color Badge
Striped Badges With Icons
Primary Badge
Success Badge
Danger Badge
Info Badge
Warning Badge
Custom Color Badge
Bordered Icon badges
Default Primary Badge
Square Success Badge
Round Danger Badge
Default Info Badge
Square Warning Badge
Round Custom Badge
Badges With Links
Secondary Badge
Primary Badge
Danger Tag
Info Tag
Custom Striped Tag
Custom Right Striped Tag
Badges With Dropdown
Secondary Badge
Primary Badge
Danger Tag
Info Tag
Custom Striped Tag
Custom Right Striped Tag
Block Badges
Use .block class with .badge, to set block
badge.