W3.CSS Lists
Lists
W3.CSS provides classes for creating clean and flexible HTML lists.
Lists can have borders, colors, hover effects, cards, images, and buttons.
The w3-ul Class
The w3-ul class removes the default list markers and adds a bottom border to the list items.
- Jill
- Eve
- Adam
Examples
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
<li></li>
</ul>
If you want a bottom border under the last list item, end the list with an empty item.
Bordered List
Add w3-border to add a border around the whole list.
- Jill
- Eve
- Adam
Example
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
List Header
A list item can contain headings and other HTML elements.
Names
- Jill
- Eve
- Adam
Example
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
List as a Card
Combine w3-ul with a card class.
- Jill
- Eve
- Adam
Colored Lists
Add a W3.CSS color class to the list to color the whole list.
- Jill
- Eve
- Adam
Or add a color to individual list items:
- Jill
- Eve
- Adam
Example
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li class="w3-green">Adam</li>
</ul>
Hoverable Lists
The w3-hoverable class adds a hover effect to the list items.
- Jill
- Eve
- Adam
Example
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
You can also add a specific hover color to each list item:
- Jill
- Eve
- Adam
Example
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
Closable List Items
List items can contain buttons and other interactive elements.
Use w3-display-container to position a close button inside the item.
- Jill ×
- Eve ×
- Adam ×
Example
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
The HTML × symbol (×) works well for close buttons.
List with Padding
Padding classes can change the spacing inside list items.
- Small padding
- Normal padding
- Large padding
Example
<li class="w3-padding-small">Jill</li>
<li class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
Avatar List
List items can contain images, text, buttons, and other elements.
-
Mike
Mike
Web Designer -
Jill
Jill
Support -
Jane
Jane
Accountant
Example
<img src="img_avatar2.png"
class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span class="w3-large">Mike</span><br>
<span>Web Designer</span>
</div>
</li>
You will learn more about w3-bar later in this tutorial.
What You Have Learned
w3-ulcreates a styled listw3-borderadds a border around a list- Lists can be displayed as cards
- Color and hover classes can be used on lists and list items
- List items can contain buttons, images, and other HTML elements
- Closable list items can be created with display classes and JavaScript
More Examples
Explore more ways to style W3.CSS lists.
Centered List
The w3-center class centers the content of list items.
- Jill
- Eve
- Adam
Example
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
List Width
Lists are 100% wide by default.
Use CSS width or max-width to make a narrower list.
- Jill
- Eve
- Adam
Example
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Different List Sizes
W3.CSS font-size classes can be used to change the size of a list.
| Class | Size |
|---|---|
w3-tiny |
Tiny |
w3-small |
Small |
w3-large |
Large |
w3-xlarge |
Extra large |
w3-xxlarge |
Extra extra large |
w3-xxxlarge |
Extra extra extra large |
w3-jumbo |
Jumbo |