Tabler
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
Paweł Kuna
UI Designer
Action Another action
Separated link

Documentation

Browse source code
On this page

Badges

Bootstrap documentation

Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.

Default markup

The default badges are square and come in the basic set of colors.

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

Use the .bagde-pill class if you want to create a badge with rounded corners. Its width will adjust to the label text.

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 color badges

You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click here to see the list of available colors and choose ones that best suit your design.

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>

Place the badge within an <a> element if you want it to perform the function of a link and make it clickable.

blue azure indigo purple pink red orange yellow lime green teal cyan gray 
<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

Leave the HTML element empty if you want to create badges without any text. Empty badges are particularly useful if you want to make an interface element more noticeable regardless of limited space.

<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>

Badge add-ons

Add the .badge-addon class to create an add-on that will customize your badge and make it more noticeable. You can use any color variants and combine them as you see fit.

task finished bundle passing CSS gzip size 20.9kB 
<span class="badge bg-green">
  task
  <span class="badge-addon ">finished</span>
</span>
<span class="badge bg-purple">
  bundle
  <span class="badge-addon ">passing</span>
</span>
<span class="badge bg-red-lt">
  CSS gzip size
  <span class="badge-addon bg-red">20.9kB</span>
</span>

Badge avatars

Create the .badge-avatar class to add an avatar that will make a badge more personalized.

Paweł Kuna JL Jeffie Lewzey Mallory Hulme Dunn Slane Emmy Levet 
<span class="badge bg-blue">
  <span class="badge-avatar" style="background-image: url(...)"></span>
  Paweł Kuna
</span>
<span class="badge bg-blue">
  <span class="badge-avatar" style="background-image: url(...)">JL</span>
  Jeffie Lewzey
</span>
<span class="badge bg-blue">
  <span class="badge-avatar" style="background-image: url(...)"></span>
  Mallory Hulme
</span>
<span class="badge bg-blue">
  <span class="badge-avatar" style="background-image: url(...)"></span>
  Dunn Slane
</span>
<span class="badge bg-blue">
  <span class="badge-avatar" style="background-image: url(...)"></span>
  Emmy Levet
</span>