Labels
You can highlight part of your text by placing it inside a .label class.
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
Example heading New
Example heading New
Example heading New
Example heading New
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>