We have covered most of the important concepts of W3CSS. In this article we shall study another very important element of a website i.e. pagination. Pagination allows user to display large amount of data on multiple pages. Pagination consists of links to different pages of the data. Pagination usually starts from page 1 to page n. Sometimes, pagination is also implemented in the form of previous and next button.
To implement basic W3CSS pagination, simply use W3CSS navigation bar with class w3-bar. Inside the bar, add links of type w3-buttons.
Name each button as 1,2,3 etc. Take a look at the following example to see W3CSS pagination in action.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
</body>
</html>
To implement basic pagination with W3CSS, simply use W3CSS navigation bar with class w3-bar. Inside the bar, add links of type w3-buttons.Name each button as 1,2,3 etc. The first button should have value “«” and last button should have value “»” Take a look at the following example to see W3CSS pagination in action.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
</body>
</html>
You can also highlight links by simply adding “w3-color” class to the link. This is useful when you want to highlight the current page. Take a look at the following example.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-red">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
</body>
</html>
You can also add hover color to any link in the pagination list. To do so, add w3-hover-color class to the button on which you want to add hover color functionality. Take a look at the following example.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-red">1</a>
<a href="#" class="w3-button w3-hover-yellow">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
</body>
</html>
In the above code, w3-hover-yellow class is added to the second button. If you open the above page in browser, and hover your mouse over second button its color will change to yellow.