Default Badges
Wrap one of the seven contextual classes ( e.g.
.badge-success ) for basic
.badge class.
8
8
8
3
8
4
6
1
83
21
78
22
83
68
40
61
Badges Radius
Use class .badge-rounded to get badges like this.
2
4
6
7
6
6
3
8
84
36
20
50
99
11
68
81
Outline Badges
Use class .badge-outline to change its border style.
7
5
7
1
5
5
5
5
36
72
28
79
37
56
44
49
Badges in Buttons
Easily highlight new or unread items by adding a <span class="badge"> to button div.
Absolute Positioning
Highligh unread items by adding .badge.up class in <span> mark
6
4
2
8
9
Labels
Add any of the default mentioned modifier classes to change the appearance of a label.
Base
Default
Primary
Success
Info
Warning
Danger
Dark
Pill Labels
Add .label-pill to change its shape.
Base
Default
Primary
Success
Info
Warning
Danger
Dark
Outline Labels
Add .label-outline to change its border style.
Base
Default
Primary
Success
Info
Warning
Danger
Dark
