Bootstrap Pagination

In this tutorial you will learn how to create pagination with Bootstrap.

Creating Pagination with Bootstrap

Pagination is the process of organizing content by dividing it into separate pages.

Pagination is used in some or other form quite often in almost every web application, for instance it is used by search engines for displaying a limited number of results on search results pages, or showing a limited number of posts for every page on a blog or forum.

  • <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>

— The output of the above example will look something like this:


Pagination with Disabled and Active States

Links inside Bootstrap pagination can further be customized for different circumstances, like when user approaches to an end or start, or indicating current page number to the user. Use the class .disabled for making the links disabled and .active to indicate the current page.

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

— The output of the above example will look something like this:

 

Note:The .disabled class only displays links as it disabled it doesn't remove the click functionality, to do this you can swap active or disabled anchors with spans.

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

Changing the Sizes of Pagination

You can also change the sizes of pagination to increase or decrease the clickable area.

Add the relative sizing classes like .pagination-lg, or .pagination-sm to the .pagination base class for creating larger or smaller pagination.

  • <!-- Larger pagination -->
  • <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>
  • <!-- Default 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="#">&raquo;</a></li>
  • </ul>
  • <!-- Smaller pagination -->
  • <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>

— The output of the above example will look something like this:


Bootstrap Pager

Sometimes you may simply require previous and next links on your website to provide simple and quick navigation to the user instead of the complex pagination as we discussed above.

This can be done using the Bootstrap class .pager.

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

— The output of the above example will look something like this:


Alignment of Pager

By default pager are aligned horizontally center but you align previous link to left and next link right using the class .previous and .next respectively.

  • <ul class="pager">
  •     <li class="previous"><a href="#">&larr; Previous</a></li>
  •     <li class="next"><a href="#">Next &rarr;</a></li>
  • </ul>

— The output of the above example will look something like this:

You can also apply the same pagination classes .disabled and .active to the pager.

  • <ul class="pager">
  •     <li class="previous disabled"><a href="#">&larr; Previous</a></li>
  •     <li class="next"><a href="#">Next &rarr;</a></li>
  • </ul>

— The output of the above example will look something like this:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.