Latest web development tutorials
 

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="#">&laquo;</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="#">&raquo;</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="#">&laquo;</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="#">&raquo;</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">&laquo;</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">&raquo;</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:

Example

<ul class="w3-pagination w3-xlarge">
Try It Yourself »

Bordered Pagination

Add the w3-border class to create a pagination with borders:

Example

<ul class="w3-pagination w3-border">
Try It Yourself »

Rounded Borders

Add the w3-round class next to w3-border for rounded borders:

Example

<ul class="w3-pagination w3-border w3-round">
Try It Yourself »

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="#">&#10094; Previous</a></li>
  <li><a href="#">Next &#10095;</a></li>
</ul>
Try It Yourself »

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 »