BEST SITE FOR WEB DEVELOPERS
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JQUERY XML JAVA More 🔍 ◑ Books REFERENCES EXERCISES
W3CSS. Lessons for beginners

Ua

W3.CSS Lists

❮ Prev Next ❯
  • × Avatar 2
    Mike
    Web Designer
  • × Avatar 5
    Jill
    Support
  • × Avatar 6
    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>
Try It Yourself »

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

Example

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

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">&times;</span>
</li>
Try It Yourself »

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>
Try It Yourself »

Avatar List

  • × Avatar 2
    Mike
    Web Designer
  • × Avatar 5
    Jill
    Support
  • × Avatar 6
    Jane
    Accountant

Example

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</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>
Try It Yourself »

Tip: You will learn more about the w3-bar classes in our W3.CSS Bars and W3.CSS Navigation chapters.

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

Example

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

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>
Try It Yourself »

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>
Try It Yourself »

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

Example

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