| 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. Available in 5 sizes |
| 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 |
| 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 |
