Documentation
Badges
A small count and labeling component.
Default markup
blue
azure
indigo
purple
pink
red
orange
yellow
lime
green
teal
cyan
gray
<span class="badge bg-blue">blue</span>
<span class="badge bg-azure">azure</span>
<span class="badge bg-indigo">indigo</span>
<span class="badge bg-purple">purple</span>
<span class="badge bg-pink">pink</span>
<span class="badge bg-red">red</span>
<span class="badge bg-orange">orange</span>
<span class="badge bg-yellow">yellow</span>
<span class="badge bg-lime">lime</span>
<span class="badge bg-green">green</span>
<span class="badge bg-teal">teal</span>
<span class="badge bg-cyan">cyan</span>
<span class="badge bg-gray">gray</span>Pill badges
To make a pill bagde (with rounded corners) add .bagde-pill class.
1
2
3
4
5
6
7
8
9
10
11
12
13
<span class="badge badge-pill bg-blue">1</span>
<span class="badge badge-pill bg-azure">2</span>
<span class="badge badge-pill bg-indigo">3</span>
<span class="badge badge-pill bg-purple">4</span>
<span class="badge badge-pill bg-pink">5</span>
<span class="badge badge-pill bg-red">6</span>
<span class="badge badge-pill bg-orange">7</span>
<span class="badge badge-pill bg-yellow">8</span>
<span class="badge badge-pill bg-lime">9</span>
<span class="badge badge-pill bg-green">10</span>
<span class="badge badge-pill bg-teal">11</span>
<span class="badge badge-pill bg-cyan">12</span>
<span class="badge badge-pill bg-gray">13</span>Soft badges
Creates a soft variant of a corresponding contextual badge variation. You can click here to see the list of available colors.
blue
azure
indigo
purple
pink
red
orange
yellow
lime
green
teal
cyan
gray
<span class="badge bg-blue-lt">blue</span>
<span class="badge bg-azure-lt">azure</span>
<span class="badge bg-indigo-lt">indigo</span>
<span class="badge bg-purple-lt">purple</span>
<span class="badge bg-pink-lt">pink</span>
<span class="badge bg-red-lt">red</span>
<span class="badge bg-orange-lt">orange</span>
<span class="badge bg-yellow-lt">yellow</span>
<span class="badge bg-lime-lt">lime</span>
<span class="badge bg-green-lt">green</span>
<span class="badge bg-teal-lt">teal</span>
<span class="badge bg-cyan-lt">cyan</span>
<span class="badge bg-gray-lt">gray</span>Links
Make a badge work as a link by putting it into an <a> element.
<a href="#" class="badge bg-blue">blue</a>
<a href="#" class="badge bg-azure">azure</a>
<a href="#" class="badge bg-indigo">indigo</a>
<a href="#" class="badge bg-purple">purple</a>
<a href="#" class="badge bg-pink">pink</a>
<a href="#" class="badge bg-red">red</a>
<a href="#" class="badge bg-orange">orange</a>
<a href="#" class="badge bg-yellow">yellow</a>
<a href="#" class="badge bg-lime">lime</a>
<a href="#" class="badge bg-green">green</a>
<a href="#" class="badge bg-teal">teal</a>
<a href="#" class="badge bg-cyan">cyan</a>
<a href="#" class="badge bg-gray">gray</a>Empty badges
If you don’t want your badge to contain any text you can do it by leaving the html element empty.
<a href="#" class="badge bg-blue"></a>
<a href="#" class="badge bg-azure"></a>
<a href="#" class="badge bg-indigo"></a>
<a href="#" class="badge bg-purple"></a>
<a href="#" class="badge bg-pink"></a>
<a href="#" class="badge bg-red"></a>
<a href="#" class="badge bg-orange"></a>
<a href="#" class="badge bg-yellow"></a>
<a href="#" class="badge bg-lime"></a>
<a href="#" class="badge bg-green"></a>
<a href="#" class="badge bg-teal"></a>
<a href="#" class="badge bg-cyan"></a>
<a href="#" class="badge bg-gray"></a>