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.
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">«</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>
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">«</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>
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">«</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>
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">❮ Previous</a>
<a href="#" class="w3-button w3-right">Next ❯</a>
</div>
</body>
</html>
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.