Secondary Badge

Use the .badge class, followed by.badge-secondaryclass within element to create secondary badge.

Secondary

Primary Badge

Use the .badge class, followed by.badge-primaryclass within element to create primary badge.

Primary

Success Badge

Use the .badge class, followed by.badge-successclass within element to create success badge.

Success

Danger Badge

Use the .badge class, followed by.badge-dangerclass within element to create danger badge.

Danger

Info Badge

Use the .badge class, followed by.badge-infoclass within element to create info badge.

Info

Warning Badge

Use the .badge class, followed by.badge-warningclass within element to create warning badge.

Warning

Badges With Icons

Primary
Success
Danger
Info
Warning

Square Badges With Icons

Use class .badge-square with .badge to make your badge square

Primary
Success
Danger
Info
Warning

Badges With Only Icons

Block Badge With Link

Use .block class with .badge, to display badge as a block element.

Badge

Block Badge With Link And Icon

Add your icon inside <a> tag class to make your block badge a link

Block Badge With Link And Only Icon

Inside your .badge.block add only icon to display your badge as a block icon

Badge Sizes

Use classes badge-{xl|lg|md|sm} to change size of a badge

Extra Large
Large
Medium
Small