Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap pager and pagination

Suggested Video Tutorials
Part 27 - Bootstrap nav component
Part 28 - Bootstrap navbar component
Part 29 - Bootstrap breadcrumbs



In this video we will discuss bootstrap pager and pagination components.



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>

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.