Badges and badge pills
Badge component allows you to easily highlight new or unread items, notify users about some useful information and mark items depending on the priority by adding <span class="badge" /> and/or <span class="badge badge-pill" /> to links, navigation, buttons, Bootstrap navs, and more. Table below contains different options and styling available for badges and badge pills.
Basic badge styling
Primary badge Primary Primary contextual alternative. To use, add .badge-primary to the base .badge class
Secondary badge Secondary Primary contextual alternative. To use, add .badge-secondary to the base .badge class
Danger badge Danger Danger contextual alternative. To use, add .badge-danger to the base .badge class
Success badge Success Success contextual alternative. To use, add .badge-success to the base .badge class
Warning badge Warning Warning contextual alternative. To use, add .badge-warning to the base .badge class
Info badge Info Info contextual alternative. To use, add .badge-info to the base .badge class
Light badge Light Light contextual alternative. To use, add .badge-light to the base .badge class
Dark badge Dark Dark contextual alternative. To use, add .badge-dark to the base .badge class
Transparent badge Transparent Transparent contextual alternative. To use, remove background color class from the .badge container
Custom badge color Purple Add one of available custom background colors. To use, add .bg-* color class to the .badge element
Basic badge options
Roundless badge Roundless badge This badge doesn't have rounded borders. To use, add .badge-roundless class to the .badge element
Block badge Block badge This badge fills 100% width of a parent element. To use, add .badge-block class to the .badge element
Linked badge Linked badge You can also use badges as a link in an <a> element
Label with dropdown Dropdown menu attached to the badge with optional caret
Icon in badge Label with icon. To use, add icon and .badge-icon class to the badge
Icon in linked badge Linked badge with icon. To use, add icon and .badge-icon to the link
Icon in rounded badge Rounded linked icon. Usage is the same, but with additional .rounded-circle class
Icon in linked rounded badge The same as above, but inside link element
Striped badges
Default badge Default Basic striped badge. To use with default badge and .badge-striped class
Primary badge Primary Primary contextual alternative. To use with primary badge and .badge-striped class
Danger badge Danger Danger contextual alternative. To use with danger badge and .badge-striped class
Success badge Success Success contextual alternative. To use with success badge and .badge-striped class
Warning badge Warning Warning contextual alternative. To use with warning badge and .badge-striped class
Info badge Info Info contextual alternative. To use with info badge and .badge-striped class
Custom border color Violet Striped badge with one of available custom border colors
Striped badge options
Right border Right border To highlight right border instead of left, add .badge-striped-right class
Linked badge Linked badge Linked striped badge. Use .badge-striped and other badge classes in <a> element
Label with dropdown Dropdown menu attached to the striped badge with optional caret
Icon in striped badge Icon inside striped badge. To use custom border color, add .border-* custom border color class. Available in 5 sizes
Icon in linked striped badge Linked icon inside striped badge
Flat badges
Primary badge Primary Flat badge in primary contextual alternative. To use with primary color classes and .badge-flat class
Secondary badge Secondary Flat badge in secondary contextual alternative. To use with grey color classes and .badge-flat class
Danger badge Danger Flat badge in danger contextual alternative. To use with danger color classes and .badge-flat class
Success badge Success Flat badge in success contextual alternative. To use with success color classes and .badge-flat class
Warning badge Warning Flat badge in warning contextual alternative. To use with warning color classes and .badge-flat class
Info badge Info Flat badge in info contextual alternative. To use with info color classes and .badge-flat class
Dark badge Dark Flat badge in dark contextual alternative. To use with dark grey color classes and .badge-flat class
Custom badge color Pink To use custom border and text colors, add border-* and text-* color classes to the .badge
Flat badge options
Roundless badge Roundless badge This badge doesn't have rounded borders. To use, add .badge-roundless class to the .badge element
Linked flat badge Linked badge Use .badge-flat and other badge classes in <a> element
Block badge Block badge To make flat badge full width, use .badge-block class. Works with linked badges as well
Flat badge with dropdown Dropdown menu attached to the flat badge with optional caret
Icon in flat badge Icon inside flat badge. To use, add icon and .badge-icon class to the badge
Icon in linked flat badge Icon inside linked flat badge. To use, add icon and .badge-icon to the link
Icon in flat rounded badge Icon inside rounded flat badge. To use, add .rounded-circle class
Icon in linked rounded badge The same as above, but inside link element
Pill badges
Primary pill badge 32 Primary contextual alternative. To use, add .badge-primary to the badge element
Secondary pill badge 78 Secondary contextual alternative. To use, add .badge-secondary to the badge element
Danger pill badge 34 Danger contextual alternative. To use, add .badge-danger to the badge element
Success pill badge 65 Success contextual alternative. To use, add .badge-success to the badge element
Warning pill badge 76 Warning contextual alternative. To use, add .badge-warning to the badge element
Info pill badge 98 Info contextual alternative. To use, add .badge-info to the badge element
Light pill badge 24 Light contextual alternative. To use, add .badge-light to the badge element
Dark pill badge 72 Dark contextual alternative. To use, add .badge-dark to the badge element
Custom pill badge color 83 Badge with one of available custom background colors. To use, add .bg-* color class
Pill badge options
Linked badge 22 Linked badge. Use .badge and other badge classes in <a> element
Badge with dropdown Dropdown menu attached to the badge element.
Flat pill badges
Primary badge 59 Primary contextual alternative. To use with primary color classes and .badge-flat class
Secondary badge 64 Secondary contextual alternative. To use with grey color classes and .badge-flat class
Danger badge 83 Danger contextual alternative. To use with danger color classes and .badge-flat class
Success badge 93 Success contextual alternative. To use with success color classes and .badge-flat class
Warning badge 38 Warning contextual alternative. To use with warning color classes and .badge-flat class
Info badge 67 Info contextual alternative. To use with info color classes and .badge-flat class
Dark badge 82 Dark contextual alternative. To use with dark grey color classes and .badge-flat class
Custom badge color 43 To use custom border and text colors, add border-* and text-* color classes to the badge element
Flat pill badge options
Linked pill badge 49 Linked pill flat badge. Use .badge and other border/text color classes in an <a> element
Pill badge with dropdown Dropdown menu attached to the badge with optional caret