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 .d-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 .d-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 |