Badges and labels are numerical indicators of how many items are associated with a link.

Badges

Use the .badge class within <span> elements to create badges.

Examples:

1
2
1
5
3
7
4
1
5
7
9
1
22
3
1
6

HTML Code:

<span class="badge badge-default-bright">1</span>
<span class="badge badge-default-light">2</span>
<span class="badge badge-default">1</span>
<span class="badge badge-default-dark">5</span>
<span class="badge badge-primary-bright">3</span>
<span class="badge badge-primary-light">7</span>
<span class="badge badge-primary">4</span>
<span class="badge badge-primary-dark">1</span>
<span class="badge badge-accent-bright">5</span>
<span class="badge badge-accent-light">7</span>
<span class="badge badge-accent">9</span>
<span class="badge badge-accent-dark">1</span>
<span class="badge badge-success">22</span>
<span class="badge badge-info">3</span>
<span class="badge badge-warning">1</span>
<span class="badge badge-danger">6</span>

Labels

Use the .label class within <span> elements to create labels.

Examples:

Default Bright
Default Light
Default
Default Dark
Primary Bright
Primary Light
Primary
Primary Dark
Accent Bright
Accent Light
Accent
Accent Dark
Success
Info
Warning
Danger

HTML Code:

<span class="label label-default-bright">Default Bright</span>
<span class="label label-default-light">Default Light</span>
<span class="label label-default">Default</span>
<span class="label label-default-dark">Default Dark</span><br />
<span class="label label-primary-bright">Primary Bright</span>
<span class="label label-primary-light">Primary Light</span>
<span class="label label-primary">Primary</span>
<span class="label label-primary-dark">Primary Dark</span><br />
<span class="label label-accent-bright">Accent Bright</span>
<span class="label label-accent-light">Accent Light</span>
<span class="label label-accent">Accent</span>
<span class="label label-accent-dark">Accent Dark</span><br />
<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>