Breadcrumbs - Pagination in Bootstrap CSS

Bootstrap made it easy to define breadcrumb navigation. Just use the class "breadcrumb" and your breadcrumb navigation will be created. But before that don't forget to include bootstrap.css file in your page. Click here to learn detail about bootstrap and download the required files.

CSS Code:

<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">|</span></li>
<li><a href="#">About Us</a> <span class="divider">|</span></li>
<li class="active">Our Mission</li>
</ul>

Output:

breadcrumb

Pagination

Like breadcrumbs user the class "pagination" in <div> and use <ul>  tag, it will auto create your pagination. It also provide options for active and disable states and sizing the pagination.

Basic pagination

CSS Code:

<div class="pagination">
<ul>
<li><a href="#">Prev</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="#">Next</a></li>
</ul>
</div>

Output:

Active and Disabled States

You can use .active class to make pagination active and .disabled class to make it inactive.

CSS Code:

<div class="pagination">
<ul>
<li class="disabled"><span>Prev</span></li>
<li class="active"><span>1</span></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="#">Next</a></li>
</ul>
</div>

Output:

Size

Bootstrap provides different sizing option like large, small and mini. You may use .pagination-large, .pagination-small or .pagination-mini according to your use.

CSS Code:

 <div class="pagination pagination-mini">
<ul>
...
</ul>
</div>
<div class="pagination pagination-small">
<ul>
...
</ul>
</div>
<div class="pagination">
<ul>
...
</ul>
</div>
<div class="pagination pagination-large">
<ul>
...
</ul>
</div>

Output:

Comments
comments powered by Disqus