Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Paginations

##### Default Pagination

If the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`.

    <nav aria-label="Page navigation example">
     <ul class="pagination pagination-primary pagin-border-primary">
       <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"><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>

##### Pagination With Active And Disabled

Use `disabled` for links that appear un-clickable and`active` to indicate the current page.

    <nav aria-label="...">
     <ul class="pagination pagination-success pagin-border-success">
       <li class="page-item disabled"><a class="page-link" href="#!" tabindex="-1">Previous</a></li>
       <li class="page-item"><a class="page-link" href="#!">1</a></li>
       <li class="page-item active"><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="#!">Next</a></li>
     </ul>
    </nav>

##### Pagination With Icons

Use an icon or symbol in place of text for some pagination links.

    <nav aria-label="Page navigation example">
     <ul class="pagination pagination-secondary pagin-border-secondary">
       <li class="page-item">
         <a class="page-link" href="#!" aria-label="Previous">
           <span aria-hidden="true">«</span>
           <span class="sr-only">Previous</span>
         </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="#!">...</a></li>
       <li class="page-item"><a class="page-link" href="#!">20</a></li>
       <li class="page-item">
         <a class="page-link" href="#!" aria-label="Next">
           <span aria-hidden="true">»</span>
           <span class="sr-only">Next</span>
         </a>
       </li>
     </ul>
    </nav>

##### Rounded Pagination

Used in rounded pagination.Use an icon or symbol in place of text for some pagination links.`[rounded-circle]`

    <nav aria-label="Page navigation example">
     <ul class="pagination pagination-dark pagin-border-dark gap-2">
       <li class="page-item">
         <a class="page-link rounded-circle" href="#!" aria-label="Previous">
           <span aria-hidden="true">«</span>
           <span class="sr-only">Previous</span>
         </a>
       </li>
       <li class="page-item"><a class="page-link rounded-circle" href="#!">1</a></li>
       <li class="page-item"><a class="page-link rounded-circle" href="#!">2</a></li>
       <li class="page-item"><a class="page-link rounded-circle" href="#!">...</a></li>
       <li class="page-item"><a class="page-link rounded-circle" href="#!">20</a></li>
       <li class="page-item">
         <a class="page-link rounded-circle" href="#!" aria-label="Next">
           <span aria-hidden="true">»</span>
           <span class="sr-only">Next</span>
         </a>
       </li>
     </ul>
    </nav>

##### Pagination Alignment

Change the alignment of pagination components with flexbox utilities. For example, with `justify-content-center:*`.

    <div class="card-body">
     <!-- left aligned pagination-->
     <nav class="m-b-30" aria-label="Page navigation example">
       <ul class="pagination pagin-border-warning pagination-warning">
         <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"><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>
     <!-- center aligned pagination-->
     <nav class="m-b-30" aria-label="Page navigation example">
       <ul class="pagination justify-content-center pagin-border-danger pagination-danger">
         <li class="page-item"><a class="page-link" href="#!">Previous</a></li>
         <li class="page-item"><a class="page-link" href="#!">I </a></li>
         <li class="page-item active"><a class="page-link" href="#!">II </a></li>
         <li class="page-item"><a class="page-link" href="#!">III</a></li>
         <li class="page-item"><a class="page-link" href="#!">Next</a></li>
       </ul>
     </nav>
     <!-- right aligned pagination-->
     <nav aria-label="Page navigation example">
       <ul class="pagination justify-content-end pagin-border-success pagination-success">
         <li class="page-item"><a class="page-link" href="#!">Previous</a></li>
         <li class="page-item"><a class="page-link" href="#!">i </a></li>
         <li class="page-item"><a class="page-link" href="#!">ii </a></li>
         <li class="page-item"><a class="page-link" href="#!">iii</a></li>
         <li class="page-item"><a class="page-link" href="#!">Next</a></li>
       </ul>
     </nav>
     <div class="code-box-copy">
       <button class="code-box-copy__btn btn-clipboard" data-clipboard-target="#pagination-align" title="Copy"><i class="icofont icofont-copy-alt"></i></button>
       <pre class="custom-scrollbar"><code class="language-html" id="pagination-align"></code></pre>
     </div>
    </div>

##### Pagination Sizing

Use `[pagination-lg/pagination-md/pagination-lg]` for additional sizes.

    <div class="card-body">
     <!-- large size pagination-->
     <nav class="m-b-30" aria-label="Page navigation example">
       <ul class="pagination pagination-lg pagination-info pagin-border-info">
         <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"><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>
     <!--medium size pagination-->
     <nav class="m-b-30" aria-label="Page navigation example">
       <ul class="pagination pagination-md pagination-info pagin-border-info">
         <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"><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>
     <!-- small size pagination-->
     <nav aria-label="Page navigation example">
       <ul class="pagination pagination-sm pagination-info pagin-border-info">
         <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"><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>
     <div class="code-box-copy">
       <button class="code-box-copy__btn btn-clipboard" data-clipboard-target="#pagination-sizing" title="Copy">
         <i class="icofont icofont-copy-alt"></i>
       </button>
       <pre class="custom-scrollbar"><code class="language-html" id="pagination-sizing"></code></pre>
     </div>
    </div>