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 use to show a single post some time we need two button on the buttom 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 a unordered list and have to use class name .pager on ul tag, In this case the two pager button lovated on the middile 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 left or previous side of the page have to use .previous class name on li tag.

and To make another button on 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 pager with disabled button or condition.

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

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.