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 |