Badge

Badges are used to provide additional information about something.

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.

Bordered Badges

Use the .badge-bordered with class .badge. Also use .border-COLOR class to add border and use .COLOR for text color

Primary Badge

Primary Badge

Success Badge

Success Badge

Danger Badge

Danger Badge

Info Badge

Info Badge

Warning Badge

Warning Badge

Custom Color Badge

Custom Color Badge

Bordered Badges with Icons

Default Primary Badge

Primary Badge

Square Success Badge

Success Badge

Round Danger Badge

Danger Badge

Default Info Badge

Info Badge

Square Warning Badge

Warning Badge

Round Custom Badge

Custom Color Badge

Bordered Icon badges

Default Primary Badge

Square Success Badge

Round Danger Badge

Default Info Badge

Square Warning Badge

Round Custom Badge

Striped Badges

Use the .badge-striped with class .badge for striped styled badges. Also use .border-left-COLOR or .border-right-COLOR class to add border to left and right.

Primary Badge

Primary Badge

Success Badge

Success Badge

Danger Badge

Danger Badge

Info Badge

Info Badge

Warning Badge

Warning Badge

Custom Color Badge

Custom Color Badge

Striped Badges With Icons

Primary Badge

Primary Badge

Success Badge

Success Badge

Danger Badge

Danger Badge

Info Badge

Info Badge

Warning Badge

Warning Badge

Custom Color Badge

Custom Color Badge

Bordered Icon badges

Default Primary Badge

Square Success Badge

Round Danger Badge

Default Info Badge

Square Warning Badge

Round Custom Badge

Badges With Dropdown

Block Badges

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

Secondary Badge

Primary Badge

Success Badge

Danger Tag

Info Tag

Warning Tag

Custom Striped Tag

Custom Right Striped Tag

Custom Round Tag