W3.CSS Badges and Tags
Displaying Badges
The w3-badge class creates a circular badge.
News 6
Comments 8
Updates 9
Example
<p>News <span class="w3-badge
w3-green">6</span></p>
<p>Comments <span class="w3-badge
w3-red">8</span></p>
<p>Updates <span class="w3-badge
w3-dark-grey">9</span></p>
Try It Yourself »
Displaying Tags
The w3-tag class creates a tag/label.
Example New!
Comments More Later!
Example
<p>Example <span class="w3-tag w3-blue">New!</span></p>
<p>Comments <span
class="w3-tag w3-teal">More Later!</span></p>
Try It Yourself »
List with Badges
- Jill 5
- Eve 3
- Adam 8
Example
<ul class="w3-ul w3-border">
<li>Jill <span
class="w3-badge w3-green w3-right">5</span></li>
<li>Eve <span
class="w3-badge w3-green w3-right">3</span></li>
<li>Adam <span
class="w3-badge w3-green w3-right">8</span></li>
</ul>
Try It Yourself »
Displaying Large Tags
66Displaying Large Badges
66Displaying Letters as Tags
A
U
G
U
S
T
Example
<span class="w3-tag w3-black">J</span>
<span class="w3-tag
w3-black">A</span>
<span class="w3-tag w3-black">N</span>
<span
class="w3-tag w3-black">U</span>
<span class="w3-tag w3-black">A</span>
<span class="w3-tag w3-black">R</span>
<span class="w3-tag
w3-black">Y</span>
Try It Yourself »
