W3CSS Lists

In the previous article, we saw how to create tables via W3CSS and how to add different effects to these tables. In this article we shall cover another very interesting topics i.e. W3CSS lists. Lists in HTML are commonly used to display data in the form of lists. They are normally used to create menu items and anything that is to be displayed in list form. There are two types of lists in HTML. Ordered lists and unordered lists. In this article we will look at unordered list

Simple W3CSS Lists

The easiest way to create W3CSS lists is by creating an ordered lists and then adding w3-list class to the opening “ul” tag. This creates a very basic list where each item is stacked vertically upon each other with a lower border. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <ul class="w3-ul">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Bordered List

You can also create a list with border around it. To do so add “w3-border” class to the opening “ul” tag. This creates an overall border around the list. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <ul class="w3-ul w3-border">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Lists as Cards

Like alerts and quotes, you can create W3CSS lists like, cards. Lists as cards look more sophisticated and clean. To create lists as cards add “w3-cards-size” class to the opening “ul” tag. Take a look at the following example to see lists as cards in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <ul class="w3-ul w3-card-8" style="width:25%">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Centered Lists

Finally, if you want to create lists with items properly centered, use “w3-center” class in the opening “ul” tag. This creates lists with horizontally centered items. Take a look at the following code sample.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <ul class="w3-ul w3-center">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

In this article we studied basics of W3CSS lists. In the next article we will built upon this knowledge and explore more W3CSS list functionalities.

<<< W3CSS Tables AdvancedMore About W3CSS Lists >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .