Latest web development tutorials
 

W3.CSS Lists


Displaying a List

  • × Mike
    Web Designer
  • × Jill
    Support
  • × Jane
    Accountant

Basic List

  • Jill
  • Eve
  • Adam

Example

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

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 Header

  • 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

  • Jill
  • Eve
  • Adam

Example

<ul class="w3-ul w3-card-4">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Centered 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

  • Jill
  • Eve
  • Adam

Example

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

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

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-classes to each <li> element:

  • Jill
  • Eve
  • Adam

Example

<li class="w3-hover-red">Jill</li>
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 »

Padded List

  • Jill
  • Eve
  • Adam
  • Jill
  • Eve
  • Adam

Example

<ul class="w3-ul">
  <li class="w3-padding-hor-16">Jill</li>
  <li class="w3-padding-hor-16">Eve</li>
  <li class="w3-padding-hor-16">Adam</li>
</ul>
Try It Yourself »

Avatar List

  • x Mike
    Web Designer
  • x Jill
    Support
  • x Jane
    Accountant

Example

<ul class="w3-ul w3-card-4">
  <li class="w3-padding-hor-16">
    <span onclick="this.parentElement.style.display='none'"
    class="w3-closebtn w3-padding">x</span>
    <img src="img_avatar2.png" class="w3-left w3-circle" style="width:60px">
    <span class="w3-xlarge">Mike</span><br>
    <span>Web Designer</span>
  </li>
</ul>
Try It Yourself »

Tiny List

  • Jill
  • Eve
  • Adam

Example

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Small List

  • Jill
  • Eve
  • Adam

Example

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Large List

  • Jill
  • Eve
  • Adam

Example

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

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

Example

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »