if you are new to Bootstrap.
plays a vital role in the websites to divide the content into pages and make them easily accessible to the user.
The main objective of this article is to know doing pagination, pagers and bread crumbs using Bootstrap.
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="#">«</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="#">»</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="#">«</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="#">»</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="#">«</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="#">»</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="#">«</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="#">»</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>
</ulNow 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.