Bootstrap Inline Labels and Badges

Introduction

Using Bootstrap, you can create inline labels (i.e., labels and annotated text) and badges (i.e., indicators and unread counts).

Inline Labels

With inline labels, you can create eye-catching labels and annotated text.

Example

Example

<div class="container">
    <div class="row">
        <div class="span12">
<p><span class="label">Default</span></p>
<p><span class="label label-success">Success</span></p>
<p><span class="label label-warning">Warning</span></p>
<p><span class="label label-important">Important</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-inverse">Inverse</span></p>
        </div>
    </div>
</div>

View Online

In bootstrap.css, from line 3162 to line 3200, the styles for label, label-success, label-warning, label-important, label-info, and label-inverse are presented.

Badges

Just as Bootstrap mentions,

Badges are small, simple components used to display indicators or counts for some categories. They can usually be found in email clients used for push notifications, such as Mail.app, or mobile apps.

Example

Example

<div class="container">
    <div class="row">
        <div class="span12">
            <p><span class="badge">1</span></p>
            <p><span class="badge badge-success">2</span></p>
            <p><span class="badge badge-warning">4</span></p>
            <p><span class="badge badge-important">6</span></p>
            <p><span class="badge badge-info">8</span></p>
            <p><span class="badge badge-inverse">10</span></p>
        </div>
    </div>
</div>

View Online

Please note that in this example, we used bootstrap-2.0.3.css, because badge styles were not defined in Bootstrap v2.0.1.

Click here to download all HTML, CSS, JS, and image files used in this tutorial.

Other Extensions