W3.CSS Pagination

« 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

Try It Yourself »

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

Example

Try It Yourself »

Pagination Arrows

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

« 1 2 3 4 »

Example

Try It Yourself »

Active/Current Link

« 1 2 3 4 »

Use one of the w3-color classes to indicate which page the user is on:

Example

Try It Yourself »

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

Try It Yourself »

Pagination Sizing

« 1 2 3 4 »

Use w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge or w3-xxxlarge to size the pagination:

Example

Try It Yourself »

Centered Pagination

« 1 2 3 4 »

To center the pagination, put the "w3-bar" element inside a "w3-center" element:

Example

Try It Yourself »

Bordered Pagination

« 1 2 3 4 5 »

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

Example

Try It Yourself »

Rounded Borders

« 1 2 3 4 5 »

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

Example

Try It Yourself »

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">❮ Previous</a>
<a href="#" class="w3-button w3-right">Next ❯</a>
</div>

Try It Yourself »

Home Link 1 Link 2 Link 3

Inline Menu Example

Try It Yourself »

❮ Previous Next ❯