Badges
Badges
| Basic badge styling | ||
|---|---|---|
| Default badge | Default | Default badge styling. To use, add .badge-default to the base .badge class |
| Primary badge | Primary | Primary contextual alternative. To use, add .badge-primary 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 |
| Custom badge color | Purple | Add one of available custom background colors. To use, add .bg-* color class to the .badge element |
| Basic badge options | ||
| Rounded badge | Rounded badge | badge with rounded corners. To use, add .badge-rounded class to the .badge element |
| Roundless badge | Roundless badge | This badge doesn't have rounded borders. To use, add .badge-roundless class to the .badge element |
| Block badge | Block badge | This badge fills 100% width of a parent element. To use, add .badge-block class to the .badge element |
| Linked badge | Linked badge | You can also use badges as a link in an <a> element |
| Icon in badge | badge with icon. To use, add icon and .badge-icon class to the badge. Available in 5 sizes |
|
| Icon in linked badge | Linked badge with icon. To use, add icon and .badge-icon to the link |
|
| Icon in rounded badge | Rounded linked icon. Usage is the same, but with additional .badge-rounded class |
|
| Icon in linked rounded badge | The same as above, but inside link 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 |
Badge Pills
| Basic badges | ||
|---|---|---|
| Default badge pill | 78 | Basic badge. To use, add .bagde-pill.badge-default to the badge element |
| Primary badge pill | 32 | Primary contextual alternative. To use, add .bagde-pill.badge-primary to the badge element |
| Danger badge pill | 34 | Danger contextual alternative. To use, add .bagde-pill.badge-danger to the badge element |
| Success badge pill | 65 | Success contextual alternative. To use, add .bagde-pill.badge-success to the badge element |
| Warning badge pill | 76 | Warning contextual alternative. To use, add .bagde-pill.badge-warning to the badge element |
| Info badge pill | 98 | Info contextual alternative. To use, add .bagde-pill.badge-info to the badge element |
| Custom badge pill color | 83 | Badge with one of available custom background colors. To use, add .bg-* color class |
| Basic badge pill options | ||
| Linked badge pill | 22 | Linked badge. Use .badge.bagde-pill and other badge classes in <a> element |
