W3.CSS — Pagination

Basic Pagination

<div class="w3-center">
    <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>
</div>

Pagination Styles

<!-- Rounded pagination -->
<div class="w3-center">
    <div class="w3-bar w3-round">
        <a href="#" class="w3-button w3-round">&laquo;</a>
        <a href="#" class="w3-button w3-round">1</a>
        <a href="#" class="w3-button w3-round">2</a>
        <a href="#" class="w3-button w3-round">3</a>
        <a href="#" class="w3-button w3-round">&raquo;</a>
    </div>
</div>

<!-- Colored pagination -->
<div class="w3-center">
    <div class="w3-bar w3-round">
        <a href="#" class="w3-button w3-blue w3-round">&laquo;</a>
        <a href="#" class="w3-button w3-blue w3-round">1</a>
        <a href="#" class="w3-button w3-blue w3-round">2</a>
        <a href="#" class="w3-button w3-blue w3-round">3</a>
        <a href="#" class="w3-button w3-blue w3-round">&raquo;</a>
    </div>
</div>

Pagination Examples

<!-- Active state -->
<div class="w3-center">
    <div class="w3-bar w3-round">
        <a href="#" class="w3-button w3-round">&laquo;</a>
        <a href="#" class="w3-button w3-blue w3-round">1</a>
        <a href="#" class="w3-button w3-round">2</a>
        <a href="#" class="w3-button w3-round">3</a>
        <a href="#" class="w3-button w3-round">4</a>
        <a href="#" class="w3-button w3-round">5</a>
        <a href="#" class="w3-button w3-round">&raquo;</a>
    </div>
</div>

<!-- Disabled state -->
<div class="w3-center">
    <div class="w3-bar w3-round">
        <a href="#" class="w3-button w3-round w3-disabled">&laquo;</a>
        <a href="#" class="w3-button w3-round">1</a>
        <a href="#" class="w3-button w3-round">2</a>
        <a href="#" class="w3-button w3-round">3</a>
        <a href="#" class="w3-button w3-round">&raquo;</a>
    </div>
</div>

<!-- Large pagination -->
<div class="w3-center">
    <div class="w3-bar w3-large w3-round">
        <a href="#" class="w3-button w3-round">&laquo;</a>
        <a href="#" class="w3-button w3-round">1</a>
        <a href="#" class="w3-button w3-round">2</a>
        <a href="#" class="w3-button w3-round">3</a>
        <a href="#" class="w3-button w3-round">&raquo;</a>
    </div>
</div>

Mini Practice

Create HTML code that:

Creates basic pagination
Adds rounded pagination
Creates pagination with active state
Uses large pagination

Up Next

Next: Learn about W3.CSS Themes.

Frequently Asked Questions about Pagination

What is Pagination in W3.CSS?

Pagination is a fundamental concept in W3.CSS. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Pagination?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Pagination.

Why is Pagination important in W3.CSS?

Pagination is essential for W3.CSS development. Understanding this concept will help you write better code and solve real-world problems more effectively.