Lists are very useful in a webpage. It can be used a variety of content as they are flexible and easy to manage. We use .w3-ul class for the list. The default style for the list is borderless but we can use other classes to add a border and other effects to the list.
Example: Adding a list on a webpage using W3.CSS.
<!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>
<!-- Adding a List on a page -->
<div class="w3-container">
<!-- List -->
<ul class="w3-ul">
<!-- List Content -->
<li>Data Structure</li>
<li>Operating System</li>
<li>Algorithm</li>
</ul>
</div>
</body>
</html>
Output:
We can also add borders by using w3-border class in W3.CSS.
Example: Adding a list with border on a webpage using W3.CSS.
<!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>
<!-- Adding a List on a page -->
<div class="w3-container">
<!-- List -->
<!-- Adding Border to the list
with some border radius -->
<ul class="w3-ul w3-border w3-round">
<!-- List Content -->
<li>Data Structure</li>
<li>Operating System</li>
<li>Algorithm</li>
</ul>
</div>
</body>
</html>
Output:
We can also add colors to the list by using w3-colour classes. These color can also be from hoverable class to add a hover effect on the list.
Example: Adding a list with colors on a webpage using W3.CSS.
<!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>
<!-- Adding a List on a page -->
<div class="w3-container">
<!-- List -->
<!-- Adding Colors to the list -->
<ul class="w3-ul">
<!-- List Content -->
<li class="w3-pale-blue">Data Structure</li>
<li class="w3-pale-red">Operating System</li>
<li class="w3-pale-yellow">Algorithm</li>
</ul>
</div>
</body>
</html>
Output:
We can even change the width of the list using basic CSS or style. List have the width set to 100% by default.
Syntax:
<div style="width: x%">...</div>
Example:
<!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>
<!-- Adding a List on a page -->
<div class="w3-container">
<!-- List -->
<!-- Setting width of the list to 50% -->
<ul class="w3-ul" style="width:50%;">
<!-- List Content -->
<li class="w3-pale-blue">Data Structure</li>
<li class="w3-pale-red">Operating System</li>
<li class="w3-pale-yellow">Algorithm</li>
</ul>
</div>
</body>
</html>
Output:
Lists also come with various sizes. You can set the size of the list from various size classes in W3.CSS.
Example:
<!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>
<!-- Adding a List on a page -->
<div class="w3-container">
<!-- List -->
<!-- List with various sizes -->
<ul class="w3-ul">
<!-- List Content -->
<li class="w3-pale-blue w3-small">
Small Sized List
</li>
<li class="w3-pale-red w3-large">
Large Sized List
</li>
<li class="w3-pale-yellow w3-jumbo">
Jumbo Sized List
</li>
</ul>
</div>
</body>
</html>
Output:
You can also add badges in the list. To add a badge you can use w3-badge class.
Example:
<!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>
<!-- Adding a List on a page -->
<div class="w3-container">
<!-- List -->
<!-- Adding Badges with the content
in the List -->
<ul class="w3-ul">
<!-- List Content -->
<li class="w3-pale-blue">
Data Structure <span class=
"w3-badge w3-blue">1</span>
</li>
<li class="w3-pale-red">
Operating System <span class=
"w3-badge w3-pink">5</span>
</li>
<li class="w3-pale-yellow">
Algorithm <span class=
"w3-badge w3-yellow">0</span>
</li>
</ul>
</div>
</body>
</html>
Output:
