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

  1. Available variations
  2. Labels in header
  3. 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

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>