Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing pagination and pager in bootstrap .

Objectives and Outcomes

In this, we will discuss about designing of pagination in bootstrap.


The following example shows the code for a pagination:

<ul class="pagination pagination-lg">
  <li class="active"><a href="#">1991</a></li>
  <li><a href="#">1992</a></li>
  <li><a href="#">1993</a></li>
  <li><a href="#">1994</a></li>
  <li class="disabled"><a href="#">1995</a></li>

Pagination is the process of organizing content by dividing it into separate pages. Use the class .disabled for making the links unclickable and .active to indicate the current page.


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.

The following example shows the code for pager:

<ul class="pager">
  <li class="previous"><a href="#">Go to past</a></li>
  <li class="next"><a href="#">Go to Future</a></li>
Another example

<ul class="pager">
  <li><a href="#">Go to Past</a></li>
  <li><a href="#">Go to Future</a></li>