How to create Bread Crumbs, Paginations and Pagers in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 4915 red flag

Bootstrap is the CSS technology developed by Twitter. It comes with predefined styles that are used straightly to make our webpage nice look and feel.
Bootstrap contains a bunch of CSS code which is usable at any place.
Recommendation
Read How to create Panels in Bootstrap before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
As we all knows that pagination plays a vital role in the websites to divide the content into pages and make them easily accessible to the user.

Objective

The main objective of this article is to know doing pagination, pagers and bread crumbs using Bootstrap.

Using Bootstrap code

We have predefined classes for pagination, pager and breadcrumb in bootstrap.css.

BreadCrumbs:
Have a look at the below code snippet of BreadCrumbs
<ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a></li>
        <li class="active">ASP.Net</li>
</ul>
We have used breadcrumb class to create them. Output of above code will be,


Pagination:
pagination class in bootstrap.css helps us to create a pagination bar.
Basic Pagination:
Below is an example of doing simple pagination
<ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <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>
        <li><a href="#">6</a></li>
        <li><a href="#">&raquo;</a></li>
</ul>
Run the code in your browser and you will see the pagination bar as below,


Active & Disabled Pagination:
If you want to disable the any li element, we have disabled class. Also we can make page active with active class. See the below code,
<ul class="pagination">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><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>
        <li><a href="#">6</a></li>
        <li><a href="#">&raquo;</a></li>
</ul>
Now see the above code in your browser


We can also manage the size of the pagination bar with pagination-sm and pagination-lg classes of Bootstrap. They are,

Small
<ul class="pagination pagination-sm">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><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>
        <li><a href="#">6</a></li>
        <li><a href="#">&raquo;</a></li>
</ul>
Output of the above code will give small pagination bar as follows


Large
<ul class="pagination pagination-lg">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><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>
        <li><a href="#">6</a></li>
        <li><a href="#">&raquo;</a></li>
</ul>
Output of the above code will gives large pagination bar like below


Pagers:
Pagers in the sense next and previous buttons that used to navigate adjacent pages.
Bootstrap contains predefined pager classes. Lets see different types of pagers in Bootstrap as follows,

Pager-1
<ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
</ul>
The above code creates two buttons like below


Pager-2
We can arrange the buttons to the respective edges.
<ul class="pager">
        <li class="previous"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span> Previous</a></li>
        <li class="next"><a href="#">Next <span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>
 This code will gives a proper arranged pager buttons in our browser


Pager-3
If you want to disable a pager button, simply use disabled class and do it like below.
<ul class="pager">
        <li class="previous disabled"><a href="#"><span class="glyphicon glyphicon-hand-left"></span> Previous</a></li>
        <li class="next"><a href="#">Next <span class="glyphicon glyphicon-hand-right"></span></a></li>
</ul
Now observe the output with a disabled 'previous' button


Pager-4
Simple pagers without names comes as follows,
<ul class="pager">
        <li class="previous"><a href="#"><span class="glyphicon glyphicon-arrow-left"></span></a></li>
        <li class="next"><a href="#"><span class="glyphicon glyphicon-arrow-right"></span></a></li>
</ul>
Run the above code snip and you will see a simple pager in your screen


Conclusion

In this article, we have seen breadcrumbs, paginations and pagers in Bootstrap. Hope you understand them.
If you have any doubts in this article, please ask below.

Thanks for reading,


Recommendation
Read How to create Labels in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)