How To Implement Pagination Feature Using Bootstrap

In this blog, we shall see how the pagination feature is implemented, 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.