Bootstrap Inline Labels and Badges

Introduction

With Bootstrap, you can create inline labels (i.e., text for Labels and annotations) and badges (i.e., indicators and unread counts).

Inline Labels

Inline labels allow you to create prominent labels and annotation text.

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>

In bootstrap.css, lines 3162 to 3200 define the styles for label, label-success, label-warning, label-important, label-info, and label-inverse.

Badges

As mentioned in Bootstrap,

Badges are small and simple components used to display indicators or counts of some sort. They are commonly found in email clients like Mail.app or mobile apps for push notifications.

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>

Note that in this example, we used bootstrap-2.0.3.css, as 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.