W3.CSS Lists
-
Mike
Web Designer -
Jill
Support -
Jane
Accountant
Basic List
The w3-ul class is used to display a basic list:
- Jill
- Eve
- Adam
Bordered List
The w3-border class adds a border around the 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 Header
An example of how to add a heading element inside the list item:
Names
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
List as a Card
The w3-card-number classes can be used to show a list as a card:
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
Centered List
The w3-center class can be used to center the list items in a list:
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
Colored List
The w3-color classes can be used to add a color to the list:
- Jill
- Eve
- Adam
Colored List Item
The w3-color classes can be used to add a color to the 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
The w3-hoverable class adds a grey background color to each list item on mouse-over:
- Jill
- Eve
- Adam
Example
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
If you want a specific hover color, add any of the w3-hover-color classes to each <li> element:
- Jill
- Eve
- Adam
Example
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
Try It Yourself »
Closable List Item
Click on the "x" to close/hide a list item:
- Jill
- Adam
- Eve
Example
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
Try It Yourself »
Tip: The HTML × entity is the preferred icon for close buttons (rather than the letter "X").
List With Padding
The w3-padding classes can be used to add padding to list items:
- Jill
- Eve
- Adam
- Jill
- Eve
- Adam
Example
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li
class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
Try It Yourself »
Avatar List
-
Mike
Web Designer -
Jill
Support -
Jane
Accountant
Example
<li class="w3-padding-16">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-white w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-left w3-circle w3-margin-right"
style="width:50px">
<span class="w3-large">Mike</span><br>
<span>Web Designer</span>
</li>
Try It Yourself »
List Width
Lists have a 100% width by default. Use the width property to change this.
Example
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
30% width:
- Jill
- Adam
50% width:
- Jill
- Adam
80% width:
- Jill
- Adam
Tiny List
Use the w3-tiny class to display a tiny list:
- Jill
- Eve
- Adam
Small List
Use the w3-small class to display a small list:
- Jill
- Eve
- Adam
Large List
Use the w3-large class to display a large list:
- Jill
- Eve
- Adam
XLarge List
Use the w3-xlarge class to display an extra large 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
Use the w3-xxlarge class to display an 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
Use the w3-xxxlarge class to display an 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
Use the w3-jumbo class to display an enormous "jumbo" list:
- Jill
- Eve
- Adam
