Labels and badges are components that allow 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="label" /> to links, navigation, buttons, Bootstrap navs, and more. Table below contains different options and styling available for badges and labels.
| Basic label styling | ||
|---|---|---|
| Default label | Default | Default label styling. To use, add .label-default to the base .label class |
| Primary label | Primary | Primary contextual alternative. To use, add .label-primary to the base .label class |
| Danger label | Danger | Danger contextual alternative. To use, add .label-danger to the base .label class |
| Success label | Success | Success contextual alternative. To use, add .label-success to the base .label class |
| Warning label | Warning | Warning contextual alternative. To use, add .label-warning to the base .label class |
| Info label | Info | Info contextual alternative. To use, add .label-info to the base .label class |
| Custom label color | Purple | Add one of available custom background colors. To use, add .bg-* color class to the .label element |
| Basic label options | ||
| Rounded label | Rounded label | Label with rounded corners. To use, add .label-rounded class to the .label element |
| Roundless label | Roundless label | This label doesn't have rounded borders. To use, add .label-roundless class to the .label element |
| Block label | Block label | This label fills 100% width of a parent element. To use, add .label-block class to the .label element |
| Linked label | Linked label | You can also use labels as a link in an <a> element |
| Label with dropdown | Dropdown menu attached to the label with optional caret | |
| Icon in label | Label with icon. To use, add icon and .label-icon class to the label. |
|
| Icon in linked label | Linked label with icon. To use, add icon and .label-icon to the link |
|
| Icon in rounded label | Rounded linked icon. Usage is the same, but with additional .label-rounded class |
|
| Icon in linked rounded label | The same as above, but inside link element | |
| Striped labels | ||
| Default label | Default | Basic striped label. To use with default label and .label-striped class |
| Primary label | Primary | Primary contextual alternative. To use with primary label and .label-striped class |
| Danger label | Danger | Danger contextual alternative. To use with danger label and .label-striped class |
| Success label | Success | Success contextual alternative. To use with success label and .label-striped class |
| Warning label | Warning | Warning contextual alternative. To use with warning label and .label-striped class |
| Info label | Info | Info contextual alternative. To use with info label and .label-striped class |
| Custom border color | Violet | Striped label with one of available custom border colors |
| Striped label options | ||
| Right border | Right border | To highlight right border instead of left, add .label-striped-right class |
| Linked label | Linked label | Linked striped label. Use .label-striped and other label classes in <a> element |
| Label with dropdown | Dropdown menu attached to the striped label with optional caret | |
| Icon in striped label | Icon inside striped label. To use custom border color, add .border-* custom border color class. |
|
| Icon in linked striped label | Linked icon inside striped label | |
| Flat labels | ||
| Default flat label | Default | Flat label in default styling. To use with grey color classes and .label-flat class |
| Primary label | Primary | Flat label in primary contextual alternative. To use with primary color classes and .label-flat class |
| Danger label | Danger | Flat label in danger contextual alternative. To use with danger color classes and .label-flat class |
| Success label | Success | Flat label in success contextual alternative. To use with success color classes and .label-flat class |
| Warning label | Warning | Flat label in warning contextual alternative. To use with warning color classes and .label-flat class |
| Info label | Info | Flat label in info contextual alternative. To use with info color classes and .label-flat class |
| Custom label color | Pink | To use custom border and text colors, add border-* and text-* color classes to the .label |
| Flat label options | ||
| Linked flat label | Linked label | Use .label-flat and other label classes in <a> element |
| Rounded flat label | Rounded label | Make flat label rounded with .label-rounded added to the base .label-flat element |
| Block label | Block label | To make flat label full width, use .label-block class. Works with linked labels as well |
| Flat label with dropdown | Dropdown menu attached to the flat label with optional caret | |
| Icon in flat label | Icon inside flat label. To use, add icon and .label-icon class to the label |
|
| Icon in linked flat label | Icon inside linked flat label. To use, add icon and .label-icon to the link |
|
| Icon in flat rounded label | Icon inside rounded flat label. To use, add .label-rounded class |
|
| Icon in linked rounded label | The same as above, but inside link element | |
| Basic badges | ||
| Default badge | 78 | Basic badge. To use, add .badge-default to the badge element |
| Primary badge | 32 | Primary contextual alternative. To use, add .badge-primary to the badge element |
| Danger badge | 34 | Danger contextual alternative. To use, add .badge-danger to the badge element |
| Success badge | 65 | Success contextual alternative. To use, add .badge-success to the badge element |
| Warning badge | 76 | Warning contextual alternative. To use, add .badge-warning to the badge element |
| Info badge | 98 | Info contextual alternative. To use, add .badge-info to the badge element |
| Custom badge color | 83 | Badge with one of available custom background colors. To use, add .bg-* color class |
| Basic 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 badges | ||
| Default badge | 63 | Flat badge in default style. To use with grey color classes and .badge-flat class |
| Primary badge | 59 | Primary contextual alternative. To use with primary 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 |
| Custom badge color | 43 | To use custom border and text colors, add border-* and text-* color classes to the badge element |
| Flat badge options | ||
| Linked badge | 49 | Linked flat badge. Use .badge and other border/text color classes in an <a> element |
| Badge with dropdown | Dropdown menu attached to the badge with optional caret | |