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 

<ul class="pagination">
    <li><a href="#">«</a></li>
    <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 

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

Output

.pagination-lg & .pagination-sm

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

Syntax

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

Output

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

Output

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

Output

Sharing is caring.