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