W3.CSS can be used to display different types of lists using various styles over w3-ul.
| Class Name | Description |
| w3-ul | Represents a basic list without any border. |
| w3-striped | Displays a stripped list. |
| w3-bordered | Draws a list with border across rows. |
| w3-border | Draws a list with border. |
| w3-card | Draws a list as a card. |
| w3-tiny | Draws a list with very small font. |
| w3-small | Draws a list with small font. |
| w3-large | Draws a list with large font. |
| w3-xlarge | Draws a list with extra large font. |
| w3-xxlarge | Draws a list with very extra large font. |
| w3-xxxlarge | Draws a list with very high extra large font. |
| 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.
No comments:
Post a Comment