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>

Help Us Improve This Page

Did you notice an error? Is there information that you expected to find on this page, but didn't? Let us know below, and we'll work on it.

Was this page helpful?



Comments are helpful!
500 character limit

Feedback is anonymous.