Main Menu
Boost your work

Upgrade to premium here

Upgrade Now
Kleon Admin Dashboard
Made with by WPThemeBooster
Theme Customizer
Theme Color Mode
Navigation Layout
Vertical Navigation Styles
Header Position
Topbar Style

Bootstrap Paginations

Lorem ipsum dolor sit amet

Basic

    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#">Prev</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><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="#">Next</a></li>
        </ul>
    </nav>
With Icons

    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i></a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><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="#"><i class="bi bi-chevron-right"></i></a></li>
        </ul>
    </nav>
    
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-double-left"></i></a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><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="#"><i class="bi bi-chevron-double-right"></i></a></li>
        </ul>
    </nav>
    
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i> Prev</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><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="#">Next <i class="bi bi-chevron-right"></i></a></li>
        </ul>
    </nav>
Sizing

    <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm">
            ---
        </ul>
    </nav>
    
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-md">
            ---
        </ul>
    </nav>
    
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-lg">
            ---
        </ul>
    </nav>
Disabled and Active States

    <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm">
            <li class="page-item disabled"><span class="page-link" href="#"><i class="bi bi-chevron-left"></i></span></li>
            <li class="page-item active" aria-current="page">
                <span class="page-link">1</span>
            </li>
            <li class="page-item"><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="#"><i class="bi bi-chevron-right"></i></a></li>
        </ul>
    </nav>
    
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-md">
            <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i></a></li>
            <li class="page-item"><a class="page-link" href="#">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="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-right"></i></a></li>
        </ul>
    </nav>
    
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-lg">
            <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i></a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item active" aria-current="page">
                <span class="page-link">3</span>
            </li>
            <li class="page-item disabled"><span class="page-link" href="#"><i class="bi bi-chevron-right"></i></span></li>
        </ul>
    </nav>