Open In App

W3.CSS Badges

Last Updated : 02 Mar, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

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=
        "https://www.w3schools.com/w3css/4/w3.css">
</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=
        "https://www.w3schools.com/w3css/4/w3.css">
</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=
        "https://www.w3schools.com/w3css/4/w3.css">
</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=
        "https://www.w3schools.com/w3css/4/w3.css">
</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:


Next Article
W3.CSS Border
author
aditya_taparia
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox