W3.CSS Badges - GeeksforGeeks

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=        "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:
W3.CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript