Basic Pagination

    <nav aria-label="Page navigation">
        <ul class="pagination mb-0">
            <li class="page-item disabled"><a class="page-link" href="javascript:void(0);">Previous</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
        </ul>
    </nav>

Pagination With Icons

    <nav aria-label="Page navigation">
        <ul class="pagination mb-0">
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" aria-label="Previous">
                    <span aria-hidden="true"><i class="bx bx-chevron-left"></i></span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" aria-label="Next">
                    <span aria-hidden="true"><i class="bx bx-chevron-right"></i></span>
                </a>
            </li>
        </ul>
    </nav>

Pagination Sizing

    <nav aria-label="...">
        <ul class="pagination pagination-sm mb-0">
            <li class="page-item active" aria-current="page">
                <span class="page-link">1</span>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
        </ul>
    </nav>
    <nav aria-label="...">
        <ul class="pagination mb-0">
            <li class="page-item active" aria-current="page">
                <span class="page-link">1</span>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
        </ul>
    </nav>
    <nav aria-label="...">
        <ul class="pagination pagination-lg mb-0">
            <li class="page-item active" aria-current="page">
                <span class="page-link">1</span>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
        </ul>
    </nav>

Center & Right Aligned Pagination

    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            <li class="page-item disabled">
                <a class="page-link">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">Next</a>
            </li>
        </ul>
    </nav>
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-end mb-0">
            <li class="page-item disabled">
                <a class="page-link">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">Next</a>
            </li>
        </ul>
    </nav>

Active and disabled states

    <nav aria-label="..." class="me-3">
        <ul class="pagination">
            <li class="page-item disabled">
                <a class="page-link">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item active" aria-current="page">
                <a class="page-link" href="javascript:void(0);">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">Next</a>
            </li>
        </ul>
    </nav>
    <nav aria-label="...">
        <ul class="pagination">
            <li class="page-item disabled">
                <span class="page-link">Previous</span>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item active" aria-current="page">
                <span class="page-link">2</span>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">Next</a>
            </li>
        </ul>
    </nav>

Pagination Style-1

    <nav aria-label="Page navigation" class="pagination-style-1">
        <ul class="pagination mb-0">
            <li class="page-item disabled">
                <a class="page-link" href="javascript:void(0);">
                    <i class="ri-arrow-left-s-line align-middle"></i>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">
                    <i class="bi bi-three-dots"></i>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">21</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">
                    <i class="ri-arrow-right-s-line align-middle"></i>
                </a>
            </li>
        </ul>
    </nav>

Pagination Style-2

    <nav aria-label="Page navigation" class="pagination-style-2">
        <ul class="pagination mb-0 flex-wrap">
            <li class="page-item disabled">
                <a class="page-link" href="javascript:void(0);">
                    Prev
                </a>
            </li>
            <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">
                    <i class="bi bi-three-dots"></i>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">17</a></li>
            <li class="page-item">
                <a class="page-link text-primary" href="javascript:void(0);">
                    next
                </a>
            </li>
        </ul>
    </nav>

Pagination Style-3

    <nav aria-label="Page navigation" class="pagination-style-3">
        <ul class="pagination mb-0 flex-wrap">
            <li class="page-item disabled">
                <a class="page-link" href="javascript:void(0);">
                    Prev
                </a>
            </li>
            <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">
                    <i class="bi bi-three-dots"></i>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">16</a></li>
            <li class="page-item">
                <a class="page-link text-primary" href="javascript:void(0);">
                    next
                </a>
            </li>
        </ul>
    </nav>

Pagination Style-4

    <nav aria-label="Page navigation" class="pagination-style-4">
        <ul class="pagination mb-0 flex-wrap">
            <li class="page-item disabled">
                <a class="page-link" href="javascript:void(0);">
                    Prev
                </a>
            </li>
            <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);">
                    <i class="bi bi-three-dots"></i>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">16</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">17</a></li>
            <li class="page-item">
                <a class="page-link text-primary" href="javascript:void(0);">
                    next
                </a>
            </li>
        </ul>
    </nav>