W3.CSS Lists
Displaying a List
- Jill
- Eve
- Adam
Bordered List
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
List as a Card
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-card-4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
Colored List
- Jill
- Eve
- Adam
Colored List Item
- Jill
- Eve
- Adam
Example
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
Hoverable list
Move the mouse over the list items:
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
Closable list
Click on the letter "x" to close/hide a list item:
- Jill x
- Adam x
- Eve x
Example
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Try It Yourself »
Tiny List
- Jill
- Eve
- Adam
Small List
- Jill
- Eve
- Adam
Large List
- Jill
- Eve
- Adam
XLarge List
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
XXLarge List
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
XXXLarge List
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
Jumbo List
- Jill
- Eve
- Adam
