Labels and Badges

Labels, tags, badges, counts, etc

Overview

Labels are our way of drawing attention to things like counts, tags, states, etc.

Default Primary Success Alert Error

Labels (5 lines)
1
2
3
4
5
<span class="label">Default</span> 
<span class="label label-primary">Primary</span> 
<span class="label label-success">Success</span> 
<span class="label label-alert">Alert</span> 
<span class="label label-error">Error</span>

Inverted

Not technically inverted, but kind of.

Default Primary Success Alert Error

Inverted Labels (8 lines)
1
2
3
4
5
6
7
8
<!--- Labels, badges, etc (inverted) ---> 
<p> 
    <span class="label label-invert">Default</span> 
    <span class="label label-invert label-primary">Primary</span> 
    <span class="label label-invert label-success">Success</span> 
    <span class="label label-invert label-alert">Alert</span> 
    <span class="label label-invert label-error">Error</span> 
</p>

With Icon

Success Alert Error

Labels with icons (15 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--- Labels (with icons) ---> 
<p> 
    <span class="label label-success"> 
        <span class="glyphicons glyphicons-thumbs-up"></span>  
        Success 
    </span> 
    <span class="label label-alert"> 
        <span class="glyphicons glyphicons-alert"></span>  
        Alert 
    </span> 
    <span class="label label-error"> 
        <span class="glyphicons glyphicons-circle-exclamation-mark"></span>  
        Error 
    </span> 
</p>

Component List

Alerts
Alerts, announcements, updates, information

Content Blocks
Draw attention to or bundle a section of content

Link Buttons
Links that look like buttons

List Groups
Displaying lists of links

Statistics
Highlighting numbers of things

Website Components
Buttons, alerts, forms, and various other page elements

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.