Main Menu

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>