W3CSS Advanced Pagination

In the previous article we studied basic W3CSS pagination. We covered how to create highlighted pagination. We also studied how to create pagination with hover color. Finally, we saw how to create pagination with left and right buttons. In this article we shall study some advanced pagination concepts. We shall start with pagination size followed by centered navigation. Next we shall see bordered pagination and rounded pagination.

Pagination Sizes

Like all the other elements. You can also change size of the pagination element. You can use w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo. Simply add one of these classes in the div with class w3-bar. Take a look at the following example to see pagination size 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 w3-xxlarge">
  <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

Centered Pagination

Like all the other elements. You can also create centered navigation. You can use w3-center class to the opening tag of the div. div with class w3-bar. Take a look at the following example to see centered pagination size 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 w3-center">
  <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

Bordered Pagination

You can also create bordered pagination using w3-border class. To do so add this class to the navigation bar div. This will create bordered navigation in action. Take a look at the following example to see bordered navigation 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 w3-border">
  <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

Rounded Pagination

You can also create rounded pagination using w3-round class. To do so add this class to the navigation bar div. This will create rounded navigation. Take a look at the following example to see bordered navigation 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 w3-border w3-round">
  <a href="#" class="w3-button">&#10094; Previous</a>
  <a href="#" class="w3-button w3-right">Next &#10095;</a>
</div>
    

</body>
    
</html>

Download the code Try the code

Open the above page in the browser, you should see pagination with next and previous links. You should also see the corners of the pagination, they are rounded since we have used w3-round class with pagination.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .