Hello readers.

This blog post will clear your queries regarding the concept Pagination in Bootstrap. The need for pagination arises when you have a website with lot of web pages. Basically, Pagination is the process of organizing content by dividing it into separate pages. To create a basic pagination, add the .pagination class to an <ul> element. A basic pagination will look like:

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

STATES:

Links inside Bootstrap pagination can be customized more. If you want to customize them, then you can do it by using disabled for clickable links and Show active state to indicate the current page.

Active state:

The active state indicates that, what is the current page. To inform the user at which page he/she is on you have to Add class .active. An active pagination appears like this: 

<ul class="pagination">
  <li><a href="#">1</a></li>
  	<li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  	<li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Disabled state-:

A disabled link cannot be clicked. Use the class disabled for making the links unclickable. A disabled pagination appears like this:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

SIZING:

The sizes of pagination can also be change, for this add classes like .pagination-lg, or .pagination-sm to the .pagination base class this will creat larger or smaller pagination. Ffor larger blocks you have to Addclass .pagination-lg and for smaller blocks .pagination-sm.

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>

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>

PAGER:

Sometimes you may simply require previous and next links on your website to provide simple and quick navigation to the user. Like the pagination links, the pager is an unordered list. This can be done using the class .pager.

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

ALIGNMENT OF PAGER-:

By default, pagers are aligned in center but you can align previous link to left and next link to right

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