W3.CSS Badges

W3.CSS Badges
❮ Previous Next ❯
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>
»
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>
»
Badges in Buttons
The w3-badge class can be used inside other elements:

Button1

Button2

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

❮ Previous Next ❯