-
W3.CSS
- W3.CSS HOME
- W3.CSS Intro
- W3.CSS Colors
- W3.CSS Containers
- W3.CSS Panels
- W3.CSS Borders
- W3.CSS Cards
- W3.CSS Defaults
- W3.CSS Fonts
- W3.CSS Google
- W3.CSS Text
- W3.CSS Round
- W3.CSS Padding
- W3.CSS Margins
- W3.CSS Display
- W3.CSS Buttons
- W3.CSS Notes
- W3.CSS Quotes
- W3.CSS Alerts
- W3.CSS Tables
- W3.CSS Lists
- W3.CSS Images
- W3.CSS Inputs
- W3.CSS Badges
- W3.CSS Tags
- W3.CSS Icons
- W3.CSS Responsive
- W3.CSS Layout
- W3.CSS Animations
- W3.CSS Effects
- W3.CSS Bars
- W3.CSS Dropdowns
- W3.CSS Accordions
- W3.CSS Navigation
- W3.CSS Sidebar
- W3.CSS Tabs
- W3.CSS Pagination
- W3.CSS Progress Bars
- W3.CSS Slideshow
- W3.CSS Modal
- W3.CSS Tooltips
- W3.CSS Grid
- W3.CSS Code
- W3.CSS Filters
- W3.CSS Trends
- W3.CSS Case
- W3.CSS Material
- W3.CSS Validation
- W3.CSS Versions
- W3.CSS Mobile
W3.CSS Colors
- W3.CSS Color Classes
- W3.CSS Color Material
- W3.CSS Color Flat UI
- W3.CSS Color Metro UI
- W3.CSS Color Win8
- W3.CSS Color iOS
- W3.CSS Color Fashion
- W3.CSS Color Libraries
- W3.CSS Color Schemes
- W3.CSS Color Themes
- W3.CSS Color Generator
Web Building
- Web Intro
- Web HTML
- Web CSS
- Web JavaScript
- Web Layout
- Web Band
- Web Catering
- Web Restaurant
- Web Architect
Examples
References
W3.CSS Lists
The w3-ul class is used to display a basic list
Basic List
The w3-ul class is used to display a basic list:
Example
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Bordered List
The w3-border class adds a border around the list:
Example
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
List Header
An example of how to add a heading element inside the list item:
Names
Example
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
List as a Card
The w3-card-number classes can be used to show a list as a card:
Example
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Centered List
The w3-center class can be used to center the list items in a list:
Example
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Colored List
The w3-color classes can be used to add a color to the list:
Example
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Colored List Item
The w3-color classes can be used to add a color to the list item:
Example
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hoverable List
The w3-hoverable class adds a grey background color to each list item on mouse-over:
Example
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
If you want a specific hover color, add any of the w3-hover-color classes to each <li> element:
Example
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
Closable List Item
Click on the "x" to close/hide a list item:
Example
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
Tip: The HTML × entity is the preferred icon for close buttons (rather than the letter "X").
List With Padding
The w3-padding classes can be used to add padding to list items:
- Jill
- Eve
- Adam
- Jill
- Eve
- Adam
Example
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li
class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
Avatar List
Example
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span
class="w3-large">Mike</span><br>
<span>Web
Designer</span>
</div>
</li>
Tip: You will learn more about the w3-bar classes in our W3.CSS Bars and W3.CSS Navigation chapters.
List Width
Lists have a 100% width by default. Use the width property to change this.
Example
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
30% width:
50% width:
80% width:
Tiny List
Use the w3-tiny class to display a tiny list:
Example
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Small List
Use the w3-small class to display a small list:
Example
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Large List
Use the w3-large class to display a large list:
Example
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XLarge List
Use the w3-xlarge class to display an extra large list:
Example
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXLarge List
Use the w3-xxlarge class to display an XXLarge list:
Example
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXXLarge List
Use the w3-xxxlarge class to display an XXXLarge list:
Example
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Jumbo List
Use the w3-jumbo class to display an enormous "jumbo" list:
Example
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>