W3CSS Pagination

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.

Basic W3CSS Pagination

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>

Download the code Try the code

Pagination with Previous and Next Button

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">&laquo;</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">&raquo;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Pagination with Highlighted Link

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">&laquo;</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">&raquo;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Pagination with Hover Colors

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">&laquo;</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">&raquo;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

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.

<<< W3CSS TabsW3CSS Advanced Pagination >>>