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
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
HTML Tutorial HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
11 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
JavaScript Interview Questions and Answers JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. Both front-end and back-end developers need to have a strong command of JavaScript, as
15+ min read
React Tutorial React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.Applications are built using reusable compon
8 min read
Decorators in Python In Python, decorators are a powerful and flexible way to modify or extend the behavior of functions or methods, without changing their actual code. A decorator is essentially a function that takes another function as an argument and returns a new function with enhanced functionality. Decorators are
10 min read
AVL Tree Data Structure An AVL tree defined as a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees for any node cannot be more than one. The absolute difference between the heights of the left subtree and the right subtree for any node is known as the balance factor of
4 min read
Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w
8 min read
Sliding Window Technique Sliding Window Technique is a method used to solve problems that involve subarray or substring or window. The main idea is to use the results of previous window to do computations for the next window. This technique is commonly used in algorithms like finding subarrays with a specific sum, finding t
13 min read