Bootstrap Labels

Labels are a great feature in Bootstraps its offering here tips, counts or other markup for pages. We will discuss about Bootstrap labels in this tutorial. Display label is very simple, use class .label as shown in following example.

<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>

Demo

The appearance of the labels can be change using the modifier classes .label-default, .label-primary, .label-success, .label-info, .label-warning, .label-danger as you can see in the following example:

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

Demo

Bootstrap Labels