SCIFI - Asp.Net Core8 & Mvc5 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="bx bx-chevron-left align-middle"></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 align-middle"></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>

Switcher

Shortcuts

Elizabeth Ava2

George Rhys1

Bethany Isla2

Margaret Emma1

Michael Souris1

Olivia Lily1

Smith Brown2

Wilson Li24

Jones Morton3

White Lee1

Wilfrid Price3

Jasmin O'Kon

River Gleichner

Saul Goodmate1

Edgardo Huel

Find out more !

Notifications :

App :

Remaiders :

This Is Not You're Looking For?