Bootstrap Pagination

Bootstrap is also giving support of pagination feature for you site or app with the multi-page pagination, in this tutorial we will discuss about that. Bootstrap is handling an unordered list for pagination with a lot of interface elements.

Pagination

The following listed classes are handling pagination feature which Boostrap provides.

---

.pagination

Add this class in <ul> tag to get the pagination on your page.

<ul class="pagination">
 <li><a href="#">&laquo;</a></li>
 <li><a href="#">1</a></li>
 .......
</ul>

.disabled, .active

By using .disabled for unclickable links and .active to indicate the current page you can customize links.

<ul class="pagination">
 <li class="disabled"><a href="#">&laquo;</a></li>
 <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
 .......
</ul>

.pagination-lg, .pagination-sm

Add these classes to get different size items.

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

---

Default Pagination

Follow the below code to make pagination. Use class .pagination as we have discussed above. The large block is hard to miss, easily scalable, and provides large click areas.

<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="#">&raquo;</a></li>
</ul>

Demo

Disabled and active states

Use .disabled for unclickable links and .active to indicate the current page to customize links as above mentioned.

<ul class="pagination">
 <li><a href="#">&laquo;</a></li>
 <li class="active"><a href="#">1</a></li>
 <li class="disabled"><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="#">&raquo;</a></li>
</ul>

Demo

Sizing

For use fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes as we discussed in the above.

<ul class="pagination pagination-lg">
 <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="#">&raquo;</a></li>
</ul><br>
<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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination pagination-sm">
 <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="#">&raquo;</a></li>
</ul>

Demo

Pager

If you want to make simple pagination links like “previous and next” with light markup and styles. This is great for simple sites like magazines and blogs. This pagination links will work in an unordered list, by default links are center aligned. Below we are summarizing the classes Bootstrap provides for pager.

---

.pager

Add this class in <ul> tag to get the pager links.

<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
</ul>

.previous, .next

Assign the class .previous to make align left and class .next to make align right the links.

<ul class="pager">
 <li class="previous"><a href="#">&larr; Older</a></li>
 <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

.disabled

Use this class to get a disabled look.

<ul class="pager">
 <li class="previous disabled"><a href="#">&larr; Older</a></li>
 <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

---

Default Pager

By default, the pager centers links. Following example demonstrates the use of class .pager discussed above:

<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
</ul>

Demo

Aligned Links

Alternatively, you can align each link to the sides to use of classes for alignment, .previous, .next discussed as above mentioned:

<ul class="pager">
 <li class="previous"><a href="#">&larr; Older</a></li>
 <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Demo

Disable States

In the following example you can see that pager links also use the general .disabled utility class from the pagination as we have discussed above.

<ul class="pager">
 <li class="previous disabled"><a href="#">&larr; Older</a></li>
 <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Demo

Bootstrap Pagination