W3.CSS Pagination
W3.CSS Paginations
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page:
Basic Pagination
To create a basic pagination, add the w3-pagination class to an <ul> element:
Example
<ul class="w3-pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
Try It Yourself »
Pagination Arrows
Use HTML entities or icons from an icon library to add pagination arrows:
Example
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
Try It Yourself »
Active/Current Link
Use one of the w3-color classes to indicate which page the user is on:
Example
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a
class="w3-green" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
Try It Yourself »
Hover Color
By default, when you move the mouse over the pagination links, they get a grey background color. Use any of the w3-hover-color classes to change the hover color:
Example
<ul class="w3-pagination">
<li><a href="#"
class="w3-hover-purple">«</a></li>
<li><a href="#"
class="w3-hover-green">1</a></li>
<li><a href="#"
class="w3-hover-red">2</a></li>
<li><a href="#"
class="w3-hover-blue">3</a></li>
<li><a href="#"
class="w3-hover-black">4</a></li>
<li><a href="#"
class="w3-hover-orange">»</a></li>
</ul>
Try It Yourself »
Pagination Sizing
Use w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge or w3-xxxlarge to size the pagination:
Bordered Pagination
Add the w3-border class to create a pagination with borders:
Rounded Borders
Add the w3-round class next to w3-border for rounded borders:
Centered Pagination
To center the pagination, wrap a <div> element with class="w3-center" around <ul>:
Example
<div class="w3-center">
<ul class="w3-pagination
w3-xlarge">
...
</ul>
</div>
Try It Yourself »
Other Pagination Examples
Next/previous Example
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul>
Try It Yourself »
Inline Menu Example
<ul class="w3-pagination w3-border">
<li><a href="#"
class="w3-light-grey">Home</a></li>
<li><a href="#">Link
1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link
3</a></li>
</ul>
Try It Yourself »
