W3.CSS List
Stylish and attractive lists can be designed using W3.CSS classes.
w3-ul : The w3-ul class makes the stylish list. It removes the list marker and adds inner line in the list items.
Example:
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1> Types of Computer </h1>
<ul class="w3-ul w3-large">
<li> Analog Computer </li>
<li> Digital Computer </li>
<li> Hybrid Computer </li>
</ul>
</div>
</body>
</html>
Other classes of W3CSS can also be used to give more stylish look to the list. Some of
classes are:
w3-hoverable: To give grey background color when mouse is moved over the list.
w3-color: To give background color to the list.
w3-hover-color: To give background color when mouse is moved over the list.
w3-border: To give border to the list. Other border classes also can be used.
w3-center: To centrally align the text of list.
w3-size: To set the size of text.
w3-card-number: To give shadow effects just like cards to the list. Number maybe 2
or 4.
w3-padding-number: To add padding to list items. Number may be 16, 24, 32, 48,
and 64.
w3-hover-shadow: To give shadow effects on mouser hover.
Example:
<html>
<head><meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h1> Types of Computer </h1>
<ul class="w3-ul w3-large w3-hoverable w3-center">
<li> Analog Computer </li>
<li> Digital Computer </li>
<li> Hybrid Computer </li>
</ul>
</div>
</body>
</html>
Qus. 1 : Which of the following classes used to display an extra large list?
- w3-large
- w3-xxlarge
- w3-xlarge
- None of these
- w3.card
- w3-card
- w3-list-card
- w3.list-card