Bootstrap Label
This chapter will explain Bootstrap labels. Labels can be used for counting, tips, or other markups on the page. Use the class .label to display labels, as shown in the following example:
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>
The result is as follows:
You can use the modified classes label-default, label-primary, label-success, label-info, label-warning, label-danger to change the appearance of the labels, as shown in the following example:
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>
The result is as follows:
More Label Examples
| Class | Description | Example |
|---|---|---|
| .label label-default | Default grey label | Try it |
| .label label-primary | Blue label of "primary" type | Try it |
| .label label-success | Green label of "success" type | Try it |
| .label label-info | Light blue label of "info" type | Try it |
| .label label-warning | Yellow label of "warning" type | Try it |
| .label label-danger | Red label of "danger" type | Try it |