Badges
Badges Default
Add any of the below mentioned modifier classes to change the appearance of a badge.
| Classes | Badges |
|---|---|
.badge-default |
43 |
.badge-primary |
1 |
.badge-success |
22 |
.badge-info |
33 |
.badge-warning |
4 |
.badge-danger |
55 |
.badge-dark |
66 |
Badges Radius
Badges are numerical indicators of items are associated with a link use .badge-radius on any radius style badges.
| Classes | Badge-Radius |
|---|---|
.badge-default |
1 |
.badge-primary |
2 |
.badge-success |
3 |
.badge-info |
4 |
.badge-warning |
5 |
.badge-danger |
6 |
.badge-dark |
7 |
Unread Items
Easily highlight new or unread items with the .badge class With icon and span.
| Name | Unread Items |
|---|---|
| Index | 1 |
| Message | 2 |
| Profile visits | 3 |
| Call | 4 |
| Songs | 5 |
| Setting | 5 |
| Bookmark | 5 |
Badges Sizes With Radius
Badges sizes for common scenarios, you can use .badge-radius on any radius style badges.
Badges In Button
Badges can also be used inside other elements, such as buttons adding a <span class="badge"> to button div.
Status Badges
You can use this examples to create status online,offline,busy and away indicator badges with profile images or similar elements.
Badges In Nav
Budges in nav styles are included active states in pill navigations. Highlight unread items by adding a .badge-nav to tab in div.
Lables
Labels Default
You can modify the appearance of the labels using the modifier classes such as, label-default, label-primary, label-success, label-info, label-warning, label-danger as shown in the following example.
| Classes | Labels |
|---|---|
.label-default |
Default |
.label-primary |
Primary |
.label-success |
Success |
.label-info |
Info |
.label-warning |
Warning |
.label-danger |
Danger |
.label-dark |
Danger |
Labels Round
The following example shows all contextual label classes with round. add .label-round to change its shape.
| Classes | Labels |
|---|---|
.label-default |
Default |
.label-primary |
Primary |
.label-success |
Success |
.label-info |
Info |
.label-warning |
Warning |
.label-danger |
Danger |
.label-dark |
Danger |
Labels outline
Add .label-outline to change its border style. Label can outline style and different border color options.
| Outline Class | Labels |
|---|---|
.label-default |
Default |
.label-primary |
Primary |
.label-success |
Success |
.label-info |
Info |
.label-warning |
Warning |
.label-danger |
Danger |
.label-dark |
Danger |
Labels Sizes With Round
Label sizes for common scenarios, you can use .label-round on any radius style label from default size to large/small size, you can add additional class .label-lg or .label-sm.
Labels In Header
Labels scale to match the size of the immediate parent element by using relative font sizing and em units