Bootstrap Pagination

In bootstrap, the pagination component lets you navigate through the multiple pages of your website, posts, search results, or pages.

 

To implement the pagination in bootstrap, you need to create an unordered list <ul> element with .pagination class in <nav> component. After that, add pagination list items to an unordered list (<ul>) using <li> element with .page-item class and add a link <a> element inside of <li> element with .page-link class.

 

Live Preview <nav>
    <ul class="pagination">
       <li class="page-item"><a class="page-link" href="#">First</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="#">4</a></li>
       <li class="page-item"><a class="page-link" href="#">5</a></li>
       <li class="page-item"><a class="page-link" href="#">Last</a></li>
    </ul>
</nav>

The above example will return the result as shown below.

 

Bootstrap pagination example result

Bootstrap Pagination States

In bootstrap, for pagination items, 2 states are available; those are active and disabled states. The active state indicates that the current page in the pagination items, and the disabled state indicates that the specific item is not available to navigate.

 

To make the pagination item active, add .active class to the respective <li> element. Same way, to disable the pagination item, add .disabled class to the respective <li> element.

 

Live Preview <nav>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">First</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 active"><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="#">Last</a></li>
  </ul>
</nav>

The above example will return the result as shown below.

 

Bootstrap pagination states examples result

Bootstrap Pagination Sizes

In bootstrap, for pagination 3 sizes are available those are small, default, and large. To change the default size of pagination to large or small, you need to add either .pagination-lg or .pagination-sm class to <ul> element.

 

Live Preview <!--Larger Size Pagination-->
<nav>
    <ul class="pagination pagination-lg">
       <li class="page-item disabled"><a class="page-link" href="#">First</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 active"><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="#">Last</a></li>
    </ul>
</nav>
<!--Smaller Size Pagination-->
<nav>
    <ul class="pagination pagination-sm">
       <li class="page-item disabled"><a class="page-link" href="#">First</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 active"><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="#">Last</a></li>
    </ul>
</nav>

The above example will return the result as shown below.

 

Bootstrap pagination sizes example result

Bootstrap Pagination Alignment

By default, the pagination component will be aligned to the left. In case if you want to align the pagination to center or right, then you need to add .justify-content-center or .justify-content-end class to the <ul> element.

 

Live Preview <!--Left Aligned (Default) Pagination-->
<nav>
   <ul class="pagination">
     <li class="page-item disabled"><a class="page-link" href="#">First</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</a></li>
     <li class="page-item"><a class="page-link" href="#">3</a></li>
     <li class="page-item"><a class="page-link" href="#">Last</a></li>
   </ul>
</nav>
<!--Center Aligned Pagination-->
<nav>
   <ul class="pagination justify-content-center">
     <li class="page-item disabled"><a class="page-link" href="#">First</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</a></li>
     <li class="page-item"><a class="page-link" href="#">3</a></li>
     <li class="page-item"><a class="page-link" href="#">Last</a></li>
   </ul>
</nav>
<!--Right Aligned Pagination-->
<nav>
   <ul class="pagination justify-content-end">
     <li class="page-item disabled"><a class="page-link" href="#">First</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</a></li>
     <li class="page-item"><a class="page-link" href="#">3</a></li>
     <li class="page-item"><a class="page-link" href="#">Last</a></li>
   </ul>
</nav>

The above example will return the result as shown below.

 

Bootstrap pagination alignment example result

 

This is how we can use the pagination component in our applications based on our requirements.