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>

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>