Skip to content
Related Articles

Related Articles

Improve Article
W3.CSS Badges
  • Last Updated : 02 Mar, 2021

The .w3-badge class is used to add additional information to the content. For example, some websites associate some number of notifications to the link. The notification number is seen when logged in to a particular website which tells the numbers of news or notifications to see by clicking it. This class helps the developers to add circular badges to their website, the default color is set to black.

Example: Adding badges in the HTML Page.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</head>
  
<body>
  
    <!-- w3-container is used to add 
          16px padding to any HTML element  -->
    <!-- w3-center is used to set the 
         content of the element to the center -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
             color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
           Welcome To GFG
        </h2>
    </div>
      
    <!-- Badges in W3.CSS -->
    <div class="w3-container"
        <h5>Notifications heading  
            <!-- Adding Badge with value 4 -->
            <span class="w3-badge">4</span
        </h5
            
        <h5>Updates  
            <!-- Adding Badge with value 2 -->
            <span class="w3-badge">2</span
        </h5
            
        <h5>Messages  
            <!-- Adding Badge with value 1 -->
            <span class="w3-badge">1</span
        </h5
        <h5>Request
            <!-- Adding Badge with value 0 -->
            <span class="w3-badge">0</span
        </h5
    </div
</body>
</html>

Output:

Badges can be used anywhere on the HTML page. They can be used inside buttons, tables, paragraphs, lists, etc. They are very useful as they can be used anywhere on the page. We can even color them or change their size using W3.CSS for other classes.



Example: Adding colored badges on the HTML page.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</head>
  
<body>
  
    <!-- w3-container is used to add 
          16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
          content of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
             color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
           Welcome To GFG
        </h2>
    </div>
      
    <!-- Colored Badges in W3.CSS -->
    <div class="w3-container"
        <h5>Notifications heading  
            <!-- Adding Badge with value 4 -->
            <span class="w3-badge w3-pink">4</span
        </h5
            
        <h5>Updates  
            <!-- Adding Badge with value 2 -->
            <span class="w3-badge w3-orange">2</span
        </h5
            
        <h5>Messages  
            <!-- Adding Badge with value 1 -->
            <span class="w3-badge w3-purple">1</span
        </h5
        <h5>Request
            <!-- Adding Badge with value 0 -->
            <span class="w3-badge w3-blue">0</span
        </h5>
    </div
</body>
  
</html>

Output:

Example: Adding badges of various sizes.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</head>
  
<body>
  
    <!-- w3-container is used to add
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the 
         content of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
             color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
           Welcome To GFG
        </h2>
    </div>
      
    <!-- Badges with different sizes using W3.CSS -->
    <div class="w3-container"
        <h5>Notifications heading  
            <!-- Adding Badge with value 4 -->
            <span class="w3-badge w3-pink w3-tiny">1</span
        </h5
            
        <h5>Updates  
            <!-- Adding Badge with value 2 -->
            <span class="w3-badge w3-orange w3-large">2</span
        </h5
            
        <h5>Messages  
            <!-- Adding Badge with value 1 -->
            <span class="w3-badge w3-purple w3-xxlarge">10</span
        </h5
        <h5>Request
            <!-- Adding Badge with value 0 -->
            <span class="w3-badge w3-blue w3-jumbo">20</span
        </h5>
    </div
</body>
</html>

Output:

Although the default is a circular badge and there is no class for square badges, we can also make a square badge by using the w3-round class to reduce its border-radius.

Example: Adding square badges in the HTML page.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</head>
  
<body>
    <!-- w3-container is used to add 
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
             color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
             Welcome To GFG
         </h2>
    </div>
      
    <!-- Square Badges in W3.CSS -->
    <div class="w3-container"
        <h5>Notifications heading  
            <!-- Adding Badge with value 4 -->
            <span class="w3-badge w3-pink w3-round">1</span
        </h5
            
        <h5>Updates  
            <!-- Adding Badge with value 2 -->
            <span class="w3-badge w3-orange w3-round">2</span
        </h5
            
        <h5>Messages  
            <!-- Adding Badge with value 1 -->
            <span class="w3-badge w3-purple w3-round">10</span
        </h5
        <h5>Request
            <!-- Adding Badge with value 0 -->
            <span class="w3-badge w3-blue w3-round">20</span
        </h5>
    </div
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :