W3.CSS Pagination

Toggle navigation
TUTORIAL HOME
W3.CSS Pagination
❮ Previous Next ❯
« 1 2 3 4 5 6 »
Basic Pagination
If you have a web site with many pages, you may want to use some sort of pagination.

To create a basic pagination, use buttons (w3-button) in a bar (w3-bar).

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>
»

To remove the space between the buttons add a w3-bar-item class:

Example
<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</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">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>
»

Pagination Arrows
Use HTML entities or icons from an icon library to add pagination arrows:

« 1 2 3 4 »
Example
<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</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">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>
»

Active/Current Link
« 1 2 3 4 »
Use one of the w3-color classes to indicate which page the user is on:

Example
<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</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">&raquo;</a>
</div>
»

Hover Color
« 1 2 3 4 »
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
<div class="w3-bar">
  <a href="#" class="w3-button w3-hover-purple">&laquo;</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">&raquo;</a>
</div>
»

Pagination Sizing
« 1 2 3 4 »
« 1 2 3 4 »
Use w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge or w3-xxxlarge to size the pagination:

Example
<div class="w3-bar w3-xlarge">
»

Centered Pagination
« 1 2 3 4 »
To center the pagination, wrap a <div> element with class="w3-center" around <ul>:

Example
<div class="w3-center">
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button">&laquo;</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">&raquo;</a>
</div>
</div>
»

Bordered Pagination
« 1 2 3 4 5 »
Add the w3-border class to create a pagination with borders:

Example
<div class="w3-bar w3-border">
»

Rounded Borders
« 1 2 3 4 5 »
Add the w3-round class next to w3-border for rounded borders:

Example
<div class="w3-bar w3-border w3-round">
»

Other Pagination Examples
The w3-bar class can also be used to create next/previous buttons:

❮ Previous Next ❯

❮ ❯
Next/previous Example
<div class="w3-bar w3-border w3-round">
  <a href="#" class="w3-button">&#10094; Previous</a>
  <a href="#" class="w3-button w3-right">Next &#10095;</a>
</div>
»

Home Link 1 Link 2 Link 3
Inline Menu Example
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
»


❮ Previous Next ❯