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>