Pagination

Use Leaf's custom pagination styles to organize blog posts, cards or images.

Bootstrap 4 documentation
Pagination example

The following example is completely identical to the markup from Bootstrap 4. This is the default style using text for "Previous" and "Next".

                                                        
<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 uses icons instead of the to mark "Next" and "Previous".

                                                        
<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

To use rounded pagination add the modifier class .circle-pagination to the .pagination element.

                                                        
<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

To disable an item add the modifier class .disabled to a .page-item element.

To indicate an active item add the modifier class .active to a .page-item element.

                                                        
<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>
Choose your size

To increase/decrease the size of the pagination elements use the modifier classes .pagination-* (eg. .pagination-lg) on the .pagination element.

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