Pagination

Use pagination elements to organize posts or other models of data into groups

Pagination example

The following example is the basic pagination style for Pixel:

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

Pagination with icons

The following example is the pagination style with icons for navigating left or right:

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
        </li>
    </ul>
</nav>

Rounded Pagination

<nav aria-label="Page navigation example">
    <ul class="pagination circle-pagination">
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
        </li>
    </ul>
</nav>

Disabled and active states

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" href="#">Previous</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

Sizing

Use the modifier classes .pagination-lg and .pagination-sm to change the size of the elements:

<nav aria-label="Page navigation example">
    <ul class="pagination pagination-lg">
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
        </li>
    </ul>
</nav>
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-md">
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
        </li>
    </ul>
</nav>
<nav aria-label="Page navigation example">
    <ul class="pagination pagination-sm">
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
        </li>
    </ul>
</nav>