Labels

You can highlight part of your text by placing it inside a .label class.

Available variations
Labels in header
Icon in labels

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

Default
Primary
Success
Info
Warning
Danger
Purple
Teal
Dark


<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>
<span class="label label-purple">Purple</span>
<span class="label label-teal">Teal</span>
<span class="label label-dark">Dark</span>

Labels in header

You can use labels inside a heading tag. Label will changes its size based on the heading size.

Example heading New


<h1>Example heading <span class="label label-teal">New</span></h1>
<h2>Example heading <span class="label label-teal">New</span></h2>
<h3>Example heading <span class="label label-teal">New</span></h3>
<h4>Example heading <span class="label label-teal">New</span></h4>
<h5>Example heading <span class="label label-teal">New</span></h5>
<h6>Example heading <span class="label label-teal">New</span></h6>

Icon in labels

Labels can accompany icons as well.

a delicious coffee
Float in clouds
Danger


<span class="label label-default">a delicious coffee <i class="fa fa-coffee"></i></span>
<span class="label label-primary"><i class="fa fa-cloud"></i> Float in clouds</span>
<span class="label label-danger"><i class="fa fa-exclamation-circle"></i> Danger <i class="fa fa-exclamation-circle"></i></span>