Victoria Baker
Senior developer
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 |
| Additional colors | ||
| Pink badge color | Pink | To use, add .badge-pink color class to the .badge element |
| Purple badge color | Purple | To use, add .badge-purple color class to the .badge element |
| Indigo badge color | Indigo | To use, add .badge-indigo color class to the .badge element |
| Teal badge color | Teal | To use, add .badge-teal color class to the .badge element |
| Yellow badge color | Yellow | To use, add .badge-yellow color class to the .badge element |
| Basic badge options | ||
| Roundless badge | Roundless badge | This badge doesn't have rounded borders. To use, add .rounded-0 class to the .badge element |
| Block badge | Block badge | This badge fills 100% width of a parent element. To use, add .d-block or .w-100 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 .p-1 in combination with color classes to .badge element |
|
| Icon in linked badge | Linked badge with icon. To use, add .p-1 in combination with color classes to .badge link element |
|
| Icon in rounded badge | Rounded linked icon. Usage is the same, but with additional .badge-pill 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 |
| 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-[color] 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 class and .badge-flat class |
| Secondary badge | Secondary | Flat badge in secondary contextual alternative. To use with grey color class and .badge-flat class |
| Danger badge | Danger | Flat badge in danger contextual alternative. To use with danger color class and .badge-flat class |
| Success badge | Success | Flat badge in success contextual alternative. To use with success color class and .badge-flat class |
| Warning badge | Warning | Flat badge in warning contextual alternative. To use with warning color class and .badge-flat class |
| Info badge | Info | Flat badge in info contextual alternative. To use with info color class and .badge-flat class |
| Dark badge | Dark | Flat badge in dark contextual alternative. To use with dark grey color class and .badge-flat class |
| Pink badge color | Pink | To use custom border and text colors, add border-pink and text-pink color classes to the .badge |
| Purple badge color | Purple | To use custom border and text colors, add border-purple and text-purple color classes to the .badge |
| Indigo badge color | Indigo | To use custom border and text colors, add border-indigo and text-indigo color classes to the .badge |
| Teal badge color | Teal | To use custom border and text colors, add border-teal and text-teal color classes to the .badge |
| Yellow badge color | Yellow | To use custom border and text colors, add border-yellow and text-yellow color classes to the .badge |
| Flat badge options | ||
| Roundless badge | Roundless badge | This badge doesn't have rounded borders. To use, add .rounded-0 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 .p-1 in combination with color classes |
|
| Icon in linked flat badge | Icon inside linked flat badge. To use, add .p-1 in combination with color classes |
|
| Icon in flat rounded badge | Icon inside rounded flat badge. To use, add .p-1 in combination with color classes |
|
| 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 .badge-[color] 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-[color] and text-[color] 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 | |