THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

W3.CSS Badges, Tags and Signs


Displaying Badges

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

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 a Tag as a Sign

London Zoo

Example

<div class="w3-tag w3-orange">London Zoo</div>
Try It Yourself »

Displaying Tags in a Row

S
A
L
E

Example

<div class="w3-tag w3-red">S</div>
<div class="w3-tag w3-black" >A</div>
<div class="w3-tag w3-yellow">L</div>
<div class="w3-tag w3-black">E</div>
Try It Yourself »

Displaying Road Signs

Falcon Ridge Parkway

Example

<div class="w3-tag w3-round w3-green" style="padding:3px">
<div class="w3-tag w3-round w3-green" style="border:1px solid white">
Falcon Ridge Parkway
</div>
</div>
Try It Yourself »

Displaying Large Tags

66

Example

<span class="w3-tag w3-jumbo w3-padding-large w3-blue">66</span>
Try It Yourself »

Displaying Large Badges

66

Example

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

Displaying Large Signs

IN CASE OF
EMERGENCY
RUN LIKE HELL !

Example

<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
IN CASE OF<br>
EMERGENCY<br>
RUN LIKE HELL !
</span>
Try It Yourself »
49,99

Example

<div class="w3-tag w3-jumbo w3-green">
  <span class="w3-xxlarge">49</span>
  <span class="w3-large">,99</span>
</div>
Try It Yourself »

Displaying Rounded Signs

DO NOT
BREATHE
UNDER WATER

Example

<span class="w3-tag w3-xxlarge w3-padding w3-round-large w3-red w3-center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Try It Yourself »

Displaying Letters as Tags

J A N U A R Y

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 »