Badges and Labels

Badges and labels are small components used to highlight counts, statuses, and categories.

Badges

Badges are typically used to show a count or indicator:

<a href="#">Inbox <span class="badge">14</span></a>

<button class="btn btn-primary">
    Messages <span class="badge">4</span>
</button>

Badges in Navigation

<ul class="nav nav-pills">
    <li class="active">
        <a href="#">Home <span class="badge">42</span></a>
    </li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Labels

Labels highlight text with coloured backgrounds:

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Labels in Headings

<h3>Bootstrap Tutorial <span class="label label-success">New</span></h3>
<h4>Breaking News <span class="label label-danger">Live</span></h4>

Practical Example

<div class="list-group">
    <a href="#" class="list-group-item">
        HTML Tutorial <span class="label label-primary">Beginner</span>
        <span class="badge">17</span>
    </a>
    <a href="#" class="list-group-item">
        React Guide <span class="label label-warning">Intermediate</span>
        <span class="badge">24</span>
    </a>
</div>