W3.CSS Pagination
What is Pagination?
Pagination is the process of dividing larger data into smaller, discrete pages.
W3.CSS uses bars and buttons to create simple pagination controls.
Pagination Classes
Use w3-bar to group the pagination links.
Add w3-button to make the links look like buttons:
Example
<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>
Add w3-bar-item to remove the space between the buttons:
Example
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button">«</a>
<a href="#" class="w3-bar-item w3-button">1</a>
<a href="#" class="w3-bar-item w3-button">2</a>
<a href="#" class="w3-bar-item w3-button">3</a>
<a href="#" class="w3-bar-item w3-button">4</a>
<a href="#" class="w3-bar-item w3-button">5</a>
<a href="#" class="w3-bar-item w3-button">»</a>
</div>
Pagination Arrows
Use HTML entities or icons to add previous and next arrows:
Example
<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">»</a>
</div>
Active Page
Add a w3-color class to highlight the current page:
Example
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">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">»</a>
</div>
Hover Colors
Use a w3-hover-color class to change the hover color:
Example
<div class="w3-bar">
<a href="#" class="w3-button w3-hover-purple">«</a>
<a href="#" class="w3-button w3-hover-green">1</a>
<a href="#" class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button w3-hover-blue">3</a>
<a href="#" class="w3-button w3-hover-black">4</a>
<a href="#" class="w3-button w3-hover-orange">»</a>
</div>
Pagination Size
Use W3.CSS size classes such as w3-small, w3-large, and w3-xlarge to change the size:
Centered Pagination
Place the w3-bar inside a w3-center element to center the pagination:
Example
<div class="w3-center 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">»</a>
</div>
Bordered Pagination
Add w3-border to create a border around the pagination:
Rounded Borders
Add w3-round together with w3-border for rounded borders:
Previous and Next
The w3-bar class can also be used for previous and next navigation:
Example
<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>
