- W3CSS Tutorial – Introduction to W3CSS
- W3CSS Colors Basics
- W3CSS Hover Colors
- W3CSS Containers
- W3CSS Borders
- W3CSS Borders Advanced
- W3CSS Panels
- W3CSS Closing and Opening Panels
- W3CSS Card
- W3CSS Text
- W3CSS Fonts
- W3CSS Round
- W3CSS Padding
- W3CSS Margins
- W3CSS Display
- W3CSS Buttons
- W3CSS Notes
- W3CSS Quotes
- W3CSS Alerts
- W3CSS Tables
- W3CSS Tables Advanced
- W3CSS Lists
- More About W3CSS Lists
- W3CSS List Sizes
- W3CSS Images
- W3CSS Image Effects
- W3CSS Inputs
- W3CSS Input Types
- W3CSS Badges
- W3CSS Tags
- W3CSS Tag Types
- W3CSS Icons
- W3CSS Responsive
- W3CSS Responsive Classes
- W3CSS Nested Rows
- W3CSS Layout Classes
- W3CSS Animations
- W3CSS Bars
- W3CSS Dropdown
- W3CSS Navigation
- W3CSS Sidebar
- W3CSS Tabs
- W3CSS Pagination
- W3CSS Advanced Pagination
- W3CSS Progressbar
- W3CSS Modal
- W3CSS Modal Advanced
- W3CSS Tooltip
- W3CSS Grid
- W3CSS Grid Advanced
- W3CSS Mixed Grid layouts
- W3CSS Rest, Percentage and Row Padding
- W3CSS Code
- W3CSS Accordion
- W3CSS Effects
- W3CSS Slideshow
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">«</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>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">«</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>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">«</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>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">❮ Previous</a>
<a href="#" class="w3-button w3-right">Next ❯</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.