A Tutorial on How to Create Bootstrap 3 pagination

The Breadcrumbs are used to show a position of page and Pagination are used to navigate or linked a page. suppose you have a lots of posts in your blog and you want to show few of them in one page and next few in second page and so on then there is needed a navigation to linked the pages and a indicator of page number, and in top portion should show the position of page from home and for that used Breadcrumbs. Now in this post we will learn Bootstrap 3 Pagination and Breadcrumbs .

Bootstrap 3 Pagination

Bootstrap 3 Pagination

Bootstrap 3 Breadcrumbs

To make a bootstrap 3 breadcrumbs take a unordered list and give class name .breadcrumb on ul and give classname .active to the current li.

Example:

Try it yourself

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li> 
</ul>

Bootstrap 3 Pagination

Pagination is the process of organizing content by dividing it into separate pages. To make a bootstrap 3 pagination take a unordered list and give class name .breadcrumb on ul and give classname .active to the current li.

Example:

 

Try it yourself

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

Active and Disabled State of Bootstrap 3 Pagination

Sometime needed to make a state disabled or active to a li , When in current page we usally make the li active and when it is the end or hane no page we use tomake the li disabled.

now to make a state active use class name .active to the active li
and ifyou want a cross icon on hover of a state that is want to make a li disabled then use .disabled class name.

Example:

 

Try it yourself

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

Size of Bootstrap 3 Pagination:

There is 3 pagination size available in bootstrap 3 and they are

  • Small size pagination

    use class name .pagination-sm with class name .pagination on ul to make a small size pagination

  • Medium or normal size pagination

    use only class name .pagination on ul to make a medium size pagination

  • and Large size pagination

    use class name .pagination-lg with class name .pagination on ul to make a large size pagination

Example:

 

Try it yourself

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>
<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>
<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

In this post we have learned about Bootstrap 3 Pagination and Breadcrumbs . I hope it will healp you, please comment to make tghe site more useful and better.

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.