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

Badge Sizes

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

Extra Large
Large
Medium
Small