Badges
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
Default Examples
To already existing class .badge add an additional class .badge-success
examples
1 2 3 4 5Outlines Examples
To already existing class .badge add an additional class .badge-outline
examples
1 2 3 4 5Badges Inside Button & Link
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
examples
Inbox 42Adapts to Active Nav States
Built-in styles are included for placing badges in active states in pill navigations.
examples
Badges with Icons
To already existing class .badge add an additional class .badge-with-icon
examples
Badges Status with Avatar
For avatar control class is .avatar-status & position .avatar-top or .avatar-bottom.
examples
Labels
Available Colors Variations
To already existing class .label add an additional class .label-success
examples
Default Primary Success Info Warning DangerOutlines Examples
To already existing class .label add an additional class .label-outline
examples
Default Primary Success Info Warning DangerLabels Pills
To already existing class .label add an additional class .label-pill
examples
Default Primary Success Info Warning DangerHeaders with Label
If you add to the .h1 to .h6 then you get the result as below. Just add the <span class=”label label-outline label-primary”>
