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 |