Secondary Badge
Use the .badge
class, followed by.badge-secondary
class within element to create secondary badge.
Primary Badge
Use the .badge
class, followed by.badge-primary
class within element to create primary 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.
Info Badge
Use the .badge
class, followed by.badge-info
class within element to create info badge.
Warning Badge
Use the .badge
class, followed by.badge-warning
class within element to create warning badge.
Badges With Icons
Square Badges With Icons
Use class .badge-square
with .badge
to make your badge square
Badges With Only Icons
Link Badge
Use <a>
tag inside your .badge
to create a badge with icon
Dropdown Badge
Use .dropdown-toggle
class with your badge text to create a badge with dropdown
Dropdown Badge With Icon
Add icon before your dropdown toggle text to create a dropdown toggle with icon
Block Badge With Link
Use .block
class with .badge
, to display badge as a block element.
Block Badge With Link And Icon
Add your icon inside <a>
tag class to make your block badge a link
Badge Sizes
Use classes badge-{xl|lg|md|sm}
to change size of a badge