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>

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.