Labels

Labels Shortcodes

Check out all the labels options.


Default

Default Success Info Warning Danger Dark

Colors

Primary Secondary Tertiary Quaternary

Labels Sizes

Small Default Large

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="row">
    <div class="col-md-6">
        <h4>Default</h4>
        <p>
            <span class="label label-default">Default</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-dark">Dark</span>
        </p>
        <hr />
        <h4>Colors</h4>
        <p>
            <span class="label label-primary">Primary</span>
            <span class="label label-secondary">Secondary</span>
            <span class="label label-tertiary">Tertiary</span>
            <span class="label label-quaternary">Quaternary</span>
        </p>
    </div>
    <div class="col-md-6">
        <h4>Labels Sizes</h4>
        <p>
            <span class="label label-sm label-primary">Small</span>
            <span class="label label-primary">Default</span>
            <span class="label label-lg label-primary">Large</span>
        </p>
    </div>
</div>

Headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
1
2
3
4
5
6
<h1>Example heading <span class="label label-dark">New</span></h1>
<h2>Example heading <span class="label label-dark">New</span></h2>
<h3>Example heading <span class="label label-dark">New</span></h3>
<h4>Example heading <span class="label label-dark">New</span></h4>
<h5>Example heading <span class="label label-dark">New</span></h5>
<h6>Example heading <span class="label label-dark">New</span></h6>