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>
<link rel="stylesheet" href=
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">
Welcome To GFG
</h2>
</div>
<div class="w3-container">
<h5>Notifications heading
<span class="w3-badge">4</span>
</h5>
<h5>Updates
<span class="w3-badge">2</span>
</h5>
<h5>Messages
<span class="w3-badge">1</span>
</h5>
<h5>Request
<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>
<link rel="stylesheet" href=
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">
Welcome To GFG
</h2>
</div>
<div class="w3-container">
<h5>Notifications heading
<span class="w3-badge w3-pink">4</span>
</h5>
<h5>Updates
<span class="w3-badge w3-orange">2</span>
</h5>
<h5>Messages
<span class="w3-badge w3-purple">1</span>
</h5>
<h5>Request
<span class="w3-badge w3-blue">0</span>
</h5>
</div>
</body>
</html>
|
Output:
Example: Adding badges of various sizes.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">
Welcome To GFG
</h2>
</div>
<div class="w3-container">
<h5>Notifications heading
<span class="w3-badge w3-pink w3-tiny">1</span>
</h5>
<h5>Updates
<span class="w3-badge w3-orange w3-large">2</span>
</h5>
<h5>Messages
<span class="w3-badge w3-purple w3-xxlarge">10</span>
</h5>
<h5>Request
<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>
<link rel="stylesheet" href=
</head>
<body>
<div class="w3-container w3-center">
<h2 class="w3-text-green w3-xxlarge">
Welcome To GFG
</h2>
</div>
<div class="w3-container">
<h5>Notifications heading
<span class="w3-badge w3-pink w3-round">1</span>
</h5>
<h5>Updates
<span class="w3-badge w3-orange w3-round">2</span>
</h5>
<h5>Messages
<span class="w3-badge w3-purple w3-round">10</span>
</h5>
<h5>Request
<span class="w3-badge w3-blue w3-round">20</span>
</h5>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...