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.