W3CSS Badges

Badges are tiny circle that are used to display important information in succinct manner. If you look at Facebook, you see notifications, messages or friend requests in small red circles. These are basically badges. Badges are black in color by default however you can change badge color quite easily. In this article we shall study W3CSS badges. Let’s create a very simple badge

Basic W3CSS Badges

To create a simple badge, we use span tag and give it a class of “w3-badge”. Anything within the span tags will be displayed in the form of a badge. Normally, a paragraph tag is used in conjunction with span tag to display a message. Take a look at the following sample code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  

  <p>Messages <span class="w3-badge">9</span></p>


</body>
    
</html>

Download the code Try the code

Colored Badges

As mentioned earlier, by default badges are of black color. However, you can create colored badges by using w3-color class in conjunction with w3-badge class inside opening span tag. In the following example we shall create teal and yellow badges. Take a look at the following code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
  
  <p>Messages <span class="w3-badge w3-teal">4</span></p>
  <p>Friend Requests <span class="w3-badge w3-yellow">7</span></p>


</body>
    
</html>

Download the code Try the code

Badges in Buttons and Lists

Apart from paragraphs, you can also add badges inside buttons and lists. The technique is to add span tag inside the button tag and then convert that span into badge using “w3-badge” class. Similarly, add span to the opening “li” element of the list and then add “w3-badge” class to the span. This will add a badge to that list element. Take a look at the following example:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<p><button class="w3-btn w3-blue">Button
<span class="w3-badge w3-margin-left w3-red">10</span>
</button></p>

<p><button class="w3-btn w3-yellow">Button
<span class="w3-badge w3-margin-left">20</span>
</button></p>
    
    <ul class="w3-ul">
  <li><span class="w3-badge">10</span> Ronaldo</li>
  <li><span class="w3-badge">20</span> Messi</li>
  <li><span class="w3-badge">31</span> Neymar</li>
</ul>


</body>
    
</html>

Download the code Try the code

Right Justified List Badges

In the previous example, badges were on the left side of the list item. You can also add right justified badges.
To do so, simple add w3-right class to the span along with w3-badge class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <ul class="w3-ul">
  <li>Ronaldo <span class="w3-badge w3-right">10</span></li>
  <li>Messi <span class="w3-badge w3-right ">20</span></li>
  <li>Neymar <span class="w3-badge w3-right ">30</span></li>
</ul>


</body>
    
</html>

Download the code Try the code

<<< W3CSS Input TypesW3CSS Tags >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .