W3.CSS Lists:

Lists can be greatly designed by using the classes of W3.CSS:

The class w3-ul makes a simple designer list:

<div class="w3-panel">
  <ul class="w3-ul">
    <li>India</li>
    <li>Pakistan</li>
    <li>Sri Lanka</li>
  </ul>
</div>

w3-ul removes the bullets appearing in general HTML lists and makes a designer list with inner row borders
Output:

The class w3-border makes a bordered list:

<div class="w3-panel">
  <ul class="w3-ul w3-border">
    <li>India</li>
    <li>Pakistan</li>
    <li>Sri Lanka</li>
  </ul>
</div>

w3-border is a general class to make borders. It can be used with any HTML element. We can even use w3-border-left, w3-border-right, w3-border-top, w3-border-bottom to create particular borders.
Output:

The class w3-center aligns the list centrally and w3-color makes a coloured list:

<div class="w3-panel">
  <ul class="w3-ul w3-border w3-center w3-green">
    <li>India</li>
    <li>Pakistan</li>
    <li>Sri Lanka</li>
  </ul>
</div>

w3-color can be used with individual <li> also to make every list item appear in different colour.
Output:

A general class w3-hoverable can be used with the <ul> tag to produce the hover effect on list items. We can also use w3-hover-color with individual <li> to produce hover effect of different colours on different list items

The following <li> can be used to create lists with images aside:

<li class="w3-bar">
  <img src="2.jpg" class="w3-bar-item w3-circle" style="width:85px">
  <div class="w3-bar-item">
    <span class="w3-large">India</span><br>
    <span>A great nation</span>
  </div>
</li>

Here in this code, an image {2.jpg} and some classes of images are also used. We will learn classes of images in W3.CSS Images.
Output:

A separate inline style with width property can be used to define width of list:

<div class="w3-panel">
  <ul class="w3-ul w3-border" style="width:50%;">
    <li>India</li>
    <li>Pakistan</li>
    <li>Sri Lanka</li>
  </ul>
</div>

Inline CSS codes are always overriding to the used classes. Here the width property is used to define the 50% width of entire window.
Output:

A simple and general class w3-size can be used with the <ul> tag to make the list appear in different sizes. Like- w3-tiny, w3-small, w3-large etc.