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.
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>
<!-- 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.
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>
<!-- 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.
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>
<!-- 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:
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>
<!-- 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:
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>
<!-- 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:
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>
<!-- 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:
Similar Reads
CSS Lists CSS Lists are used to display items in a clear and organized manner, either with bullets (unordered) or numbers (ordered). They help keep content neat and structured on a webpage. With CSS, you can customize the look of lists to improve the design and layout of your content. Try It: .custom-item { b
5 min read
CSS Lists CSS Lists are used to display items in a clear and organized manner, either with bullets (unordered) or numbers (ordered). They help keep content neat and structured on a webpage. With CSS, you can customize the look of lists to improve the design and layout of your content. Try It: .custom-item { b
5 min read
CSS Lists CSS Lists are used to display items in a clear and organized manner, either with bullets (unordered) or numbers (ordered). They help keep content neat and structured on a webpage. With CSS, you can customize the look of lists to improve the design and layout of your content. Try It: .custom-item { b
5 min read
CSS Lists CSS Lists are used to display items in a clear and organized manner, either with bullets (unordered) or numbers (ordered). They help keep content neat and structured on a webpage. With CSS, you can customize the look of lists to improve the design and layout of your content. Try It: .custom-item { b
5 min read
Tailwind CSS List Style Type This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS List Style Type property. This class specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if the ‘list-style-im
1 min read
Blaze UI Lists Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to c
2 min read