Tutorials References Exercises Menu
Paid Courses

W3.CSS Badges


9 6 8 33 66 99


W3.CSS Badge Classes

W3.CSS provides only one class for badges:

Class Defines
w3-badge Circular black badge

Badges

The w3-badge class creates a circular badge. The default color is black.

Updates 9

Example

<p>Updates <span class="w3-badge">9</span></p>
Try It Yourself »

Colored Badges

Use a w3-color class to change the color of a badge:

News 6Comments 8

Example

<p>News <span class="w3-badge w3-green">6</span></p>
<p>Comments <span class="w3-badge w3-red">8</span></p>
Try It Yourself »


Badges in Buttons

The w3-badge class can be used inside other elements:

Example

<p><button class="w3-btn w3-black">Button
<span class="w3-badge w3-margin-left w3-white">1</span>
</button></p>

<p><button class="w3-btn w3-red">Button
<span class="w3-badge w3-margin-left">2</span>
</button></p>
Try It Yourself »

Badges in Lists

  • 1 Jill
  • 2 Eve
  • 3 Adam

Example

<ul class="w3-ul">
  <li><span class="w3-badge">1</span> Jill</li>
  <li><span class="w3-badge">2</span> Eve</li>
  <li><span class="w3-badge">3</span> Adam</li>
</ul>
Try It Yourself »

The w3-right class floats an element to the right.

This is perfect for lists with badges:

  • Jill 1
  • Eve 2
  • Adam 3

Example

<ul class="w3-ul w3-border">
  <li>Jill <span class="w3-badge w3-right w3-margin-right">1</span></li>
  <li>Eve <span class="w3-badge w3-right w3-margin-right">2</span></li>
  <li>Adam <span class="w3-badge w3-right w3-margin-right">3</span></li>
</ul>
Try It Yourself »

Badges in Tables

First Name Last Name Points
Jill Smith 50
Eve Jackson 1 94
Adam Johnson 2 67
Bo Nilsson 50
Mike Ross 35

Example

<tr>
  <td>Eve</td>
  <td>Jackson <span class="w3-badge">1</span></td>
  <td>94</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson <span class="w3-badge">2</span></td>
  <td>67</td>
</tr>
Try It Yourself »

Badge Sizes

By default, a badge will inherit the size of its container.

The w3-size classes (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) can be used to modify the size of a badge:

6 6 6

66 66 66

66 66

You might want to add some extra padding to large badges:

Example

<span class="w3-badge w3-jumbo w3-red">66</span>
<span class="w3-badge w3-jumbo w3-red w3-padding">66</span>
Try It Yourself »

UTF-8 Badges

Since HTML5 supports the UTF-8 character set, you can use Dingbats for single digit badges.

❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉
❶ ❷ ❸ ❹ ❺ ➅ ➆ ➇ ➈ ➉

Example

<div class="w3-xxlarge">
&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786; &#x2787; &#x2788; &#x2789;
</div>

<div class="w3-xxlarge w3-text-red">
&#x2776; &#x2777; &#x2778; &#x2779; &#x277A; &#x2785; &#x2786; &#x2787; &#x2788; &#x2789;
</div>
Try It Yourself »