W3.CSS Lists
Lists are very useful in a webpage. It can be used a variety of content as they are flexible and easy to manage. We use .w3-ul class for the list. The default style for the list is borderless but we can use other classes to add a border and other effects to the list.
Example: Adding a list on a webpage using W3.CSS.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> < div class = "w3-container w3-center" > <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > <!-- Adding a List on a page --> < div class = "w3-container" > <!-- List --> < ul class = "w3-ul" > <!-- List Content --> < li >Data Structure</ li > < li >Operating System</ li > < li >Algorithm</ li > </ ul > </ div > </ body > </ html > |
Output:
We can also add borders by using w3-border class in W3.CSS.
Example: Adding a list with border on a webpage using W3.CSS.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> < div class = "w3-container w3-center" > <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > <!-- Adding a List on a page --> < div class = "w3-container" > <!-- List --> <!-- Adding Border to the list with some border radius --> < ul class = "w3-ul w3-border w3-round" > <!-- List Content --> < li >Data Structure</ li > < li >Operating System</ li > < li >Algorithm</ li > </ ul > </ div > </ body > </ html > |
Output:
We can also add colors to the list by using w3-colour classes. These color can also be from hoverable class to add a hover effect on the list.
Example: Adding a list with colors on a webpage using W3.CSS.
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> < div class = "w3-container w3-center" > <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > <!-- Adding a List on a page --> < div class = "w3-container" > <!-- List --> <!-- Adding Colors to the list --> < ul class = "w3-ul" > <!-- List Content --> < li class = "w3-pale-blue" >Data Structure</ li > < li class = "w3-pale-red" >Operating System</ li > < li class = "w3-pale-yellow" >Algorithm</ li > </ ul > </ div > </ body > </ html > |
Output:
We can even change the width of the list using basic CSS or style. List have the width set to 100% by default.
Syntax:
<div style="width: x%">...</div>
Example:
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> < div class = "w3-container w3-center" > <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > <!-- Adding a List on a page --> < div class = "w3-container" > <!-- List --> <!-- Setting width of the list to 50% --> < ul class = "w3-ul" style = "width:50%;" > <!-- List Content --> < li class = "w3-pale-blue" >Data Structure</ li > < li class = "w3-pale-red" >Operating System</ li > < li class = "w3-pale-yellow" >Algorithm</ li > </ ul > </ div > </ body > </ html > |
Output:
Lists also come with various sizes. You can set the size of the list from various size classes in W3.CSS.
Example:
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> < div class = "w3-container w3-center" > <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > <!-- Adding a List on a page --> < div class = "w3-container" > <!-- List --> <!-- List with various sizes --> < ul class = "w3-ul" > <!-- List Content --> < li class = "w3-pale-blue w3-small" > Small Sized List </ li > < li class = "w3-pale-red w3-large" > Large Sized List </ li > < li class = "w3-pale-yellow w3-jumbo" > Jumbo Sized List </ li > </ ul > </ div > </ body > </ html > |
Output:
You can also add badges in the list. To add a badge you can use w3-badge class.
Example:
HTML
<!DOCTYPE html> < html > < head > <!-- Adding W3.CSS file through external link --> < link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" > </ head > < body > <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> < div class = "w3-container w3-center" > <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> < h2 class = "w3-text-green w3-xxlarge" > Welcome To GFG </ h2 > </ div > <!-- Adding a List on a page --> < div class = "w3-container" > <!-- List --> <!-- Adding Badges with the content in the List --> < ul class = "w3-ul" > <!-- List Content --> < li class = "w3-pale-blue" > Data Structure < span class = "w3-badge w3-blue" >1</ span > </ li > < li class = "w3-pale-red" > Operating System < span class = "w3-badge w3-pink" >5</ span > </ li > < li class = "w3-pale-yellow" > Algorithm < span class = "w3-badge w3-yellow" >0</ span > </ li > </ ul > </ div > </ body > </ html > |
Output:
Contact Us