Normal Badges

Add class .badge-{color} with .badge

Item Label
Primary label Primary
Info label Info
Danger label Danger
Success label Success
Warning label Warning

Badges Pills

Add class .badge-pill

Item Label
Primary label Primary
Info label Info
Danger label Danger
Success label Success
Warning label Warning

Contextual Variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Item Label
Primary label Primary
Info label Info
Danger label Danger
Success label Success
Warning label Warning

Badges Normal with number and icon

Item Label
Primary label 1
Info label 2
Danger label
Success label 4
Warning label

Badges with Number

Item Label
Primary label 1
Info label 2
Danger label 3
Success label 4
Warning label 5

Badges with Icon

Item Label
Primary label
Info label
Danger label
Success label
Warning label
Copyright ©Designed & Developed by 💜 Focontra