W3.CSSLists
- ×
Mike
Web Designer - ×
Jill
Support - ×
Jane
Accountant
Basic List
Thew3-ul class is used to display a basic list:
- Jill
- Eve
- Adam
Bordered List
Thew3-border class adds a border around the list:
- Jill
- Eve
- Adam
Example
<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
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
List as a Card
Thew3-card-number classes can be used to show a list as a card:
- Jill
- Eve
- Adam
Example
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Centered List
Thew3-center class can be used to center the list items in a list:
- Jill
- Eve
- Adam
Colored List
Thew3-color classes can be used to add a color to the list:
- Jill
- Eve
- Adam
Colored List Item
Thew3-color classes can be used to add a color to the list item:
- Jill
- Eve
- Adam
Example
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hoverable List
Thew3-hoverable class adds a grey background color to each list item on mouse-over:
- Jill
- Eve
- Adam
Example
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
If you want a specific hover color, add any of thew3-hover-color classes to each <li> element:
- 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 Item
Click on the "x" to close/hide a list item:
- Jill×
- Adam×
- Eve×
Tip: The HTML × entity is the preferred icon for close buttons (rather than the letter "X").
List With Padding
Thew3-padding classes can be used to add padding to list items:
- Jill
- Eve
- Adam
- Jill
- Eve
- Adam
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
- ×Mike
Web Designer - ×Jill
Support - ×Jane
Accountant
Example
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<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>
Tip: You will learn more about the w3-bar classes in ourW3.CSS Bars andW3.CSS Navigation chapters.
List Width
Lists have a 100% width by default. Use the width property to change this.
Example
<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 thew3-tiny class to display a tiny list:
- Jill
- Eve
- Adam
Small List
Use thew3-small class to display a small list:
- Jill
- Eve
- Adam
Large List
Use thew3-large class to display a large list:
- Jill
- Eve
- Adam
XLarge List
Use thew3-xlarge class to display an extra large list:
- Jill
- Eve
- Adam
XXLarge List
Use thew3-xxlarge class to display an XXLarge list:
- Jill
- Eve
- Adam
XXXLarge List
Use thew3-xxxlarge class to display an XXXLarge list:
- Jill
- Eve
- Adam
Example
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Jumbo List
Use thew3-jumbo class to display an enormous "jumbo" list:
- Jill
- Eve
- Adam
