How To Implement Pagination Feature Using Bootstrap

What is pagination?

The sequence of numbers assigned to the pages in a book or periodical.

For your information,in Bootstrap, we have different class to handle the pagination.

Pagination

This class is to get pagination on your page.

Syntax 

  1. <ul class="pagination">  
  2.     <li><a href="#">«</a></li>  
  3.     <li><a href="#">1</a></li> ….. </ul>  

Output


.disabled & .active

Using these classes, we can customize the links by using .disabled for unclickable links and .active, which shows the current page.

Syntax 

  1. <ul class="pagination">  
  2.     <li><a href="#">«</a></li>  
  3.     <li class="active"><a href="#">1</a></li>  
  4.     <li class="disabled"><a href="#">2</a></li>  
  5.     <li><a href="#">3</a></li>  
  6.     <li><a href="#">4</a></li>  
  7.     <li><a href="#">5</a></li>  
  8.     <li><a href="#">»</a></li>  
  9. </ul>  

Output


.pagination-lg & .pagination-sm

These classes are used to get different size items on the screen.

Syntax

  1. <ul class="pagination pagination-lg">...</ul>   

Output


  1. <ul class="pagination">...</ul>   

Output


  1. <ul class="pagination pagination-sm">...</ul>   

Output


Sharing is caring.

Ebook Download
View all
Learn
View all