THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

W3.CSS Lists


Displaying a 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 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 »

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

Move the mouse over the list items:

  • Jill
  • Eve
  • Adam

Example

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
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 »

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 »