W3CSS List Sizes

From the last two lectures, we have been discussing lists in W3CSS. We studied what different types of lists are and how to enhance look and feel of these lists. We saw list of card types, colored lists, hoverable lists and so forth on so forth. Apart from these functionalities we can also change list sizes. There are multiple classes that can be used to create lists of different sizes.

Tiny Lists

The smallest of all the lists is the list created by adding w3-tiny class to the opening “ul” tag of the lists. It creates a very small list. Take a look at the following example.

<!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-tiny">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Small List

Small lists are a bit bigger than tiny lists but smaller than default lists. To create small lists, simply append, “w3-small” class to the opening “ul” tag of the list. Take a look at the following example.

<!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-small">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Large Lists

Large lists are a bit bigger than default lists but smaller than rest of the extra large and jumbo lists. To create large lists, simply append, “w3-large” class to the opening “ul” tag of the list. Take a look at the following example.

<!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-large">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Extra Large Lists

There are three types of extra large lists: extra large, extra extra large and extra extra extra large. All of these three types of lists are bigger than large lists. The classes used for creating these lists are w3-xlarge, w3-xxlarge and w3-xxxlarge. The following code contains example of these three kinds of lists. Take a look at it.

<!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-xlarge">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
    
   <ul class="w3-ul w3-xxlarge">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
    
       
   <ul class="w3-ul w3-xxxlarge">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Jumbo Lists

Jumbo lists are the largest of all the lists. To create jumbo lists, simply add “w3-jumbo” class to the opening “ul” tag of the list. The following example demonstrates usage of jumbo lists.

<!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-jumbo">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .