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
<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
<!--- 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
<!--- 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.