W3.CSS Lists

Toggle navigation
TUTORIAL HOME
W3.CSS Lists
❮ Previous Next ❯
× Mike
Web Designer
× Jill
Support
× Jane
Accountant
Basic List
The w3-ul class is used to display a basic list:

Jill
Eve
Adam
Example
<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»
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>
»
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>
»
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>
»
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>
»
Colored List
The w3-color classes can be used to add a color to the list:

Jill
Eve
Adam

Example
<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»
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>
»
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>
»
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>
»
Closable List Item
Click on the "x" to close/hide a list item:

Adam ×
Adam ×
Eve ×

Example
<li class="w3-display-container">Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-right">&times;</span>
</li>
»
Tip: The HTML &times; 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>
»
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">&times;</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>
»
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>
»
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
Example
<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»
Small List
Use the w3-small class to display a small list: 

Jill
Eve
Adam
Example
<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»
Large List
Use the w3-large class to display a large list:

Jill
Eve
Adam
Example
<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»
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>
»
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>
»
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>
»
Jumbo List
Use the w3-jumbo class to display an enormous "jumbo" list: 

Jill
Eve
Adam

Example
<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»

❮ Previous Next ❯