W3.CSS - Lists

Quiz

W3.CSS can be used to display different types of lists using various styles over w3-ul.

Sr. No.	Class Name & Description
1	w3-ul Represents a basic list without any border.
2	w3-striped Displays a stripped list.
3	w3-bordered Draws a list with border across rows.
4	w3-border Draws a list with border.
5	w3-card Draws a list as a card.
6	w3-tiny Draws a list with very small font.
7	w3-small Draws a list with small font.
8	w3-large Draws a list with large font.
9	w3-xlarge Draws a list with extra large font.
10	w3-xxlarge Draws a list with very extra large font.
11	w3-xxxlarge Draws a list with very high extra large font.
12	w3-jumbo Draws a list with jumbo large font.

Example

w3css_lists.htm

<html>
   <head>
      <title>The W3.CSS Lists</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>List Demo</h2>
      <hr/>
      <h3>Simple List</h3>
      <ul class = "w3-ul">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>Stripped List with borders</h3>
      <ul class = "w3-ul w3-striped w3-bordered w3-border">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List as Card</h3>
      <ul class = "w3-ul w3-card-4">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List with very small font</h3>
      <ul class = "w3-ul w3-tiny">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
   </body>
</html>

Result

Verify the result.

Print Page