Labels and badges
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