Default label examples.
<span class="label">1</span>
Rounded label examples.
<span class="label label-rounded">10</span>
Square label examples.
<span class="label label-square">10</span>
Inline label examples.
<span class="label label-inline">Pending</span>
Pill label examples.
<span class="label label-pill label-inline">10</span>
Solid style
<span class="label label-rounded label-success mr-2">3</span>
<span class="label label-rounded label-primary mr-2">12</span>
<span class="label label-danger mr-2">5</span>
<span class="label label-warning mr-2">11</span>
<span class="label label-danger label-pill label-inline mr-2">New</span>
<span class="label label-warning label-pill label-inline mr-2">Pending</span>
<span class="label label-dark label-inline mr-2">Done</span>
<span class="label label-info label-inline mr-2">In process</span>
Outline style
<span class="label label-rounded label-success mr-2">3</span>
<span class="label label-rounded label-primary mr-2">12</span>
<span class="label label-danger mr-2">5</span>
<span class="label label-warning mr-2">11</span>
<span class="label label-danger label-pill label-inline mr-2">New</span>
<span class="label label-warning label-pill label-inline mr-2">Pending</span>
<span class="label label-dark label-inline mr-2">Done</span>
<span class="label label-info label-inline mr-2">In process</span>
Light style
<span class="label label-rounded label-success mr-2">3</span>
<span class="label label-rounded label-primary mr-2">12</span>
<span class="label label-danger mr-2">5</span>
<span class="label label-warning mr-2">11</span>
<span class="label label-danger label-pill label-inline mr-2">New</span>
<span class="label label-warning label-pill label-inline mr-2">Pending</span>
<span class="label label-dark label-inline mr-2">Done</span>
<span class="label label-info label-inline mr-2">In process</span>
Set font weight using
.font-weight-{lighter|light|normal|bold|bolder|boldest}class.
<span class="label label-primary label-inline font-weight-lighter mr-2">Lighter</span>
<span class="label label-primary label-inline font-weight-light mr-2">Light</span>
<span class="label label-primary label-inline font-weight-normal mr-2">Normal</span>
<span class="label label-primary label-inline font-weight-bold mr-2">Bold</span>
<span class="label label-primary label-inline font-weight-bolder mr-2">Bolder</span>
<span class="label label-primary label-inline font-weight-boldest mr-2">Boldest</span>
Label size options
<span class="label label-sm label-rounded label-success">3</span>
<span class="label label-md font-weight-bold label-rounded label-success">3</span>
<span class="label label-lg font-weight-bolder label-rounded label-success">3</span>
<span class="label label-xl font-weight-boldest label-rounded label-success">3</span>
Font weight options
Dot label style example
Dot label style example
Dot label style example
Dot label style example
<span class="label label-dot label-success"></span>
Dot label style <span class="label label-dot label-success"></span> example
Font weight options
<button class="btn font-weight-bold btn-primary mr-2">Button label <span class="label label-sm label-white ml-2">5</span></button>
<button class="btn font-weight-bold btn-light-success mr-2">Button label <span class="label label-danger ml-2">5</span></button>
<button class="btn font-weight-bold btn-lg btn-outline-danger">Button label <span class="label label-lg label-warning ml-2">5</span></button>
