A Tutorial on How to make Bootstrap 3 Pager

A pager is also one king of pagination, it provides the next and prev button, When we are used to showing a single post some time we need two buttons on the bottom position to show the previous and next post, we can use pager at that time. Now We are going to learn how to make Bootstrap 3 Pager.

Bootstrap 3 normal pager

To make a normal pager we need to take an unordered list and have to use the class name .pager on ul tag, In this case, the two-pager button located on the middle position of the page.

Example:

Try it yourself

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Bootstrap 3 pager on left and right or previous and next position

To make a button on the left or previous side of the page have to use .previous class name on li tag.

and To make another button on the right or next side of the page have to use .next class name on the li tag.

Example:

Try it yourself

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Bootstrap 3 pagers with disabled buttons or conditions.

The disabled pager is used to make the prev or next button disabled, Suppose if there is no more page on the next and in that condition we need to make the pager button disabled. To make the button disable have to use .disabled class name.

Example:

Try it yourself

<ul class="pager">
    <li class="previous disabled"><a href="#">← Previous</a></li>
    <li class="next"><a href="#">Next →</a></li>
</ul>

In this post, you have learned how to make Bootstrap 3 Pager. I hope the post helped you and please provide your valuable comment to make the site better and more useful.

Thanks for reading