W3.CSS Lists

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.

Output:

👁 Image

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.

Output:

👁 Image

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.

Output:

👁 Image

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:

Output:

👁 Image

Lists also come with various sizes. You can set the size of the list from various size classes in W3.CSS.

Example:

Output:

👁 Image

You can also add badges in the list. To add a badge you can use w3-badge class.

Example:

Output:

👁 Image