HI WELCOME TO SIRIS

Bootstrap pager and pagination

In this we will discuss bootstrap pager and pagination components. 

Bootstrap tutorial for beginners

Bootstrap Pager : Use pager class to create a simple pager with Previous and Next buttons. 
bootstrap pager example 

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

Aligning the Previous and Next buttons : By default the previous and next links are in the center of their container. To align previous link on the left and next link on the right use previous and next classes respectively. 
bootstrap pager align 

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

Disabling Pager Links : To disable either the previous or next link, use disabled class.

Bootstrap Pagination : To create a simple pagination bar use pagination class. 
bootstrap pagination example 

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

Use active class to indicate the current page that you are on. To disable a page number in the pagination bar, use disabled class. With disabled and active classes, only the appearance of the links change, but their link functionality still works when clicked. To remove the link functionality use <span> element instead of <a> element.

Pagination Size : Use pagination-lg or pagination-sm classes to create large or small pagination bars. If we do not use either of these classes, then a pagination bar with the default size is created. 
bootstrap pagination size 

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

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

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