Introduction
This chapter demonstrates about the W3CSS Badges which creates circular badge these badges can be displayed in black color by default and following are the concepts covered in this chapter.
- Badges and its Classes
- Different Badges
Description
W3.CSS can provide many badges by using the w3-badge class which is used to create a circular Badge and the default color is Black . The image below demonstrates to creating a badge as shown.
The code below demonstrates to creating badge as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Badges</h2>
<p>w3-badge class create a circular badge with default black color.</p>
<p>SPLESSONS <span class="w3-badge">9</span></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
In Badge class there is only one class define which is shown below.
- Class w3-badge.
- Description Which defines circular black badge.
Description
W3.CSS provides several badges to use which have the several properties those can be applied on HTML elements here some badges are shown below.
Colored Badges
User can user the different colors badges by using the w3-color class but by default which displays in Black color. The code below demonstrates to display the badges in different colors.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Badges</h2>
<p>User can use color classes to change the color of a badge:</p>
<p>SPLESSONS<span class="w3-badge w3-blue">6</span></p>
<p>W3.CSS<span class="w3-badge w3-aqua">8</span></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Badges in Lists
User can display the Badges in a list wise by using the w3-ul class which should be displayed in order wise The code below demonstrates to display Badges in List.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Badges in a List</h2>
<ul class="w3-ul">
<li><span class="w3-badge">1</span> Liam</li>
<li><span class="w3-badge">2</span> Sophia</li>
<li><span class="w3-badge">3</span> James</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Badges in Buttons
In W3.CSS user can also display the badges in buttons by using the w3-badge class which can be used inside an other elements. The code below demonstrates adjusting the Badges in Buttons as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Badges in Buttons</h2>
<p>The w3-badge class can be used inside buttons:</p>
<p><button class="w3-btn">Button
<span class="w3-badge w3-margin-left w3-red">1</span>
</button></p>
<p><button class="w3-btn w3-red">Button
<span class="w3-badge w3-margin-left">2</span>
</button></p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Badges in Tables
User can design the tables with badges by using the w3-table class in which tables user can insert the badges to the elements. The code below demonstrates the badges in tables as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Badges in a Table</h2>
<table class="w3-table w3-bordered w3-striped w3-border">
<thead>
<tr class="w3-blue">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jhon <span class="w3-badge">1</span></td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson <span class="w3-badge">2</span></td>
<td>67</td>
</tr>
<tr>
<td>Bo</td>
<td>Nilsson</td>
<td>50</td>
</tr>
<tr>
<td>Mike</td>
<td>Rose</td>
<td>34</td>
</tr>
</table>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Different sizes Badges
In W3.CSS user can also change the size of the badge by default which can take the container size but user can also arrange these tags in different sizes by using the w3-size class. Following are the sizes of w3-size class.
The code below demonstrates the Different size of badges as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Small and Large Badges</h2>
<p>
<span class="w3-badge w3-tiny w3-blue">s</span>
<span class="w3-badge w3-small w3-blue">s</span>
<span class="w3-badge w3-blue">s</span>
</p>
<p>
<span class="w3-badge w3-large w3-padding w3-blue">sp</span>
<span class="w3-badge w3-xlarge w3-padding w3-blue">sp</span>
<span class="w3-badge w3-xxlarge w3-padding w3-blue">sp</span>
</p>
<p>
<span class="w3-badge w3-xxxlarge w3-padding w3-blue">sp</span>
<span class="w3-badge w3-jumbo w3-padding w3-blue">sp</span></p>
<p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Colored Badges
- Badges in Lists
- Badges in Buttons
- Badges in Tables
- Different sizes Badges
- w3-tiny
- w3-small
- w3-large
- w3-xlarge
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
Key Points
- User can get the badges in different sizes.
- User can also arrange the badges in tables.
- User can be arranged Badges in list.