Get Karik Now

Pagination

Showing pagination to indicate a series of related content exists across multiple pages.

  1. Home
  2. Elements
  3. Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Basic Pagination

Use the .pagination and .page-item

Default

Pagination with icon arrow

Disabled and active states

Circle pagination: user .pagination-circle class

                                                
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</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 class="sr-only">(current)</span>
            </span>
        </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>
Color Options

Use the .pagination-[brand | primary | success | info | warning | danger | dark]

Size Icons

Custom size for pagination, user -sm, -md, -lg, -xl class

                                                
<nav aria-label="..." class="row align-items-center pagination-brand pagination-md">
    <div class="col-lg-6 mb-15">  
        <ul class="pagination align-items-centers">
            <li class="page-item">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true"><i class="ti-angle-double-left"></i></a>
                </li>
            <li class="page-item">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true"><i class="ti-angle-left"></i></a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active" aria-current="page">
            <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
            </li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
            <li class="page-item"><a class="page-link" href="#">6</a></li>
            <li class="page-item">
            <a class="page-link" href="#"><i class="ti-angle-right"></i></a>
            </li>
            <li class="page-item">
            <a class="page-link" href="#"><i class="ti-angle-double-right"></i></a>
            </li>
        </ul>
    </div>
    <div class="col-lg-2 mb-15">
        <div class="d-flex align-items-center">                                               
            <div class="spinner-loading spinner-success mr-10"></div>
            <div class="ml-15 text-muted font-sm">Loading...</div>
        </div>
    </div>
    <div class="col-lg-4"> 
        <div class="d-flex align-items-center">                                              
            <select class="mr-10 nice-select nice-select-number">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            <span class="text-muted font-xs">Show 10 of 150 items</span>
        </div>
    </div>
</nav>