Secondary Badge

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

Secondary Badge

Primary Badge

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

Primary Badge

Success Badge

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

Success Badge

Danger Badge

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

Danger Badge

Info Badge

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

Info Badge

Warning Badge

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

Warning Badge

Custom Blue Grey Color Badge

Use the .badge class, followed by.bg-blue-greyclass within element to create blue grey badge.

Custom Blue Grey Color Badge

Badges with Icons

Secondary Badge with Icon

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

Secondary Badge

Square Primary Badge with Icon

Use the .badge class, followed by.badge-square class for square bordered badge.

Primary Badge

Round Success Badge with Icon

Use the .badge class, followed by.round class for round bordered badge.

Success Badge

Danger Badge with Icon

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

Danger Badge

Square Info Badge with Icon

Use the .badge class, followed by.badge-squareclass for square badge.

Info Badge

Round Warning Badge with Icon

Use the .badge class, followed by.round class for round bordered.

Warning Badge

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.

Badges With Dropdown

Block Badges

Use .block class with .badge, to set block badge.

Secondary Badge

Primary Badge

Success Badge