Pagination

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>
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>
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-sm-end justify-content-center 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>
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>
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>