Pagination

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

Bootstrap 4 documentation

Example

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

Result
Html

Copy

1
2
3
4
5

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