YNEX - Bootstrap 5 Premium Admin & Dashboard Template

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="bi bi-caret-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="bi bi-caret-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 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>

Switcher

Pagination