Label
Base Examples
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>Contextual Examples
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>
Font Weight
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>
Sizes
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>Dot Style
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> exampleUsing In Buttons
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>
