Thursday, March 16, 2017

W3.CSS - Lists

W3.CSS can be used to display different types of lists using various styles over w3-ul.
Class NameDescription
w3-ulRepresents a basic list without any border.
w3-stripedDisplays a stripped list.
w3-borderedDraws a list with border across rows.
w3-borderDraws a list with border.
w3-cardDraws a list as a card.
w3-tinyDraws a list with very small font.
w3-smallDraws a list with small font.
w3-largeDraws a list with large font.
w3-xlargeDraws a list with extra large font.
w3-xxlargeDraws a list with very extra large font.
w3-xxxlargeDraws a list with very high extra large font.
w3-jumboDraws 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.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)