Bootstrap pagination

This article discusses about bootstrap pagination. Pagination, an unordered list is handled by Bootstrap like a lot of other interface elements.
Pagination:
The following classes are provided by Bootstrap to handle pagination.
.pagination:
Add this class to get the pagination on your page.as an example

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  </ul> 

.disabled, .active:
For customizing links by using .disabled for unclickable links and .active to indicate the current page.as an example

<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
  .......
</ul> 

.pagination-lg, .pagination-sm :
Use these classes to get different size items.as an example

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul> 

PAGINATION:
Following example demonstrates the use of class .pagination and class .disabled, .active discussed in the above.

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li class="disabled"><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="#">»</a></li>
</ul> 

Pager:
If you need to create simple pagination links that go beyond text, the pager can work quite well. Like the pagination links, the pager is an unordered list. By default the links are centered. The following table lists the classes Bootstrap provides for pager.
.pager:
Add this class to get the pager links. as an example

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

.previous, .next:
Use class .previous to left align and .next to right-align the links.

<ul class="pager">
  <li class="previous"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul> 

.disabled:
Add this class to get a muted look.

<ul class="pager">
  <li class="previous disabled"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul> 

ALIGNED LINKS:
Following example demonstrates the use of classes for alignment, .previous, .next discussed in the above.

<ul class="pager">
  <li class="previous"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul> 

Now let us look through a pagination, which includes the features that are discussed above.

<!DOCTYPE html>
<html>
  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <ul class="pagination">
    <li class="previous disabled"><a href="#">← Older</a></li>
  <li><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li class="disabled"><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="#">»</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul>
  </body>
</html> 

pagination

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar
3>Working with scrollspy in bootstrap
4>Bootstrap list-group
5>Dropdown buttons in Bootstrap
6>Bootstrap Dropdown Menu
7>Bootstrap tables
8>Bootstrap Alerts

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

1 thought on “Bootstrap pagination

Leave a Reply

Your email address will not be published. Required fields are marked *