W3.CSS Lists

Last Updated : 02 Mar, 2021

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>