Bootstrap Pagination
Pagination:
There are three classes that are provided by bootstrap for pagination. Consider the following table in which we have described these three classes:
| Classes | Description | Example |
| .pagination | This class is used to add pagination to the webpage. | <ul class = “pagination”>
<li><a>ω</a></li> <li><a>1</a></li> </ul> |
| .disabled, .active | These classes are used to customize the links. The .disabled class is used to disable the link that is the links cannot be clicked. The .active class is used to make the current page active. | <ul class = “pagination”>
<li class = “disabled”><a>ω </a></li> <li class = “active”><a>1<span class = “sr-only”></span></a></li> </ul> |
| .pagination-lg, .pagination-sm | These classes are used for different sizes of items. | < ul class = “pagination pagination- lg” ></ ul >
< ul class = “pagination” >< /ul > < ul class = “pagination pagination- sm”></ ul >
|
Default Pagination:
Consider the following example in which we have used the .pagination class:
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Example</title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<ul class = “pagination”>
<li><a>←</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>→</a></li>
</ul>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example the links can be added by using the href attribute in the <a> tag. You can also write <a href = “#”>.
States:
Consider the following example in which we have used the classes .disabled and .active for the state of pagination:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >
< script src = ” / scripts/ jquery. min. js” ></ script >
< script src = “/ bootstrap/ js/ bootstrap. min. js ” ></ script >
< /head >
< body >
< ul class = “pagination” >
< li >< a >← < /a >< /li >
< li >< a > 1 </ a ></ li >
< li >< a > 2 </ a >< /li >
< li class = “active” >< a > 3 </ a ></ li >
< li class = “disabled” >< a > 4 < /a >< / li >
< li >< a > 5 </ a >< / li >
< li >< a >→ </ a ></ li >
< /ul >
< /body >
< /html >
The above code will generate the following result:
OUTPUT:
In the above example, number 3 is in active state and number 4 is disabled.
Sizing:
Consider the following example in which we have used the .pagination-sm and .pagination-lg classes:
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Example </title>
<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<ul class = “pagination pagination-sm”>
<li><a>←</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>→</a></li>
</ul>
<br>
<ul class = “pagination”>
<li><a>←</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>→</a></li>
</ul>
<br>
<ul class = “pagination pagination-lg”>
<li><a>←</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>→</a></li>
</ul>
</body>
</html>
The above code will generate the following result:
OUTPUT:
Pager:
Pager is also an unordered list just like the pagination links. The pager links when created are aligned in the center of the page by default.
Consider the following table in which we have described the pager classes supported by Bootstrap:
| Classes | Description | Example |
| .pager | This class is used to add the pager links in the page. | < ul class = “pager” >
<li > <a > Previous < /a > </ li > < li> < a > Next < /a >< /li > </ ul > |
| .previous, .next | These classes are used for the alignment of the links. The class .previous is used for the left alignment of the link and the class .next is used for the right alignment of the link. | <ul class = “pager”>
<li class = “previous”> <a>← </a> </li> <li class = “next”> <a>→ </a></li> </ul> |
| .disabled | This class is used to disable a pager link. | <ul class = “pager”>
<li class = “previous disabled”> <a>←</a></li> <li class = “next”> <a>→</a></li> </ul>
|
Default Pager:
Consider the following example in which we have used the .pager class to add a default pager link:
CODE:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Example</title>
<link href=”/ bootstrap /css/bootstrap.min.css” rel=”stylesheet”>
<script src=”/scripts/jquery.min.js”></script>
<script src=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<ul class = “pager”>
<li><a>Previous</a></li>
<li><a>Next</a></li>
</ul>
</body>
</html>
The above example will generate the following result:
OUTPUT:
It can be seen in the above example that when .pager class is used the links are centered aligned by default. This was not done if we were using the .pagination class.
Aligned Links:
Consider the following example in which we have used the classes .previous and .next for the alignment of the links:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example </ title >
< link href = ” / bootstrap / css/ bootstrap. min. css ” rel = “stylesheet” >
< script src = ” /scripts / jquery. min. js ” ></ script >
< script src = ” / bootstrap/ js/ bootstrap. min. js” ></ script >
</ head >
< body >
< ul class = “pager” >
< li class = “previous” >< a >← Backward </ a >< /li >
< li class = “next” >< a > Forward → < /a ></ li >
</ ul >
< /body >
</ html >
The above code will generate the following result:
OUTPUT:
States:
Consider the following example in which we have used the class .disabled to disable the pager link:
CODE:
<! DOCTYPE html >
< html >
< head >
< title > Bootstrap Example < /title >
< link href = “/ bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >
< script src = “/ scripts / jquery. min. js” ></ script >
< script src = ” / bootstrap/ js/ bootstrap. min. js” ></ script >
< /head >
< body >
< ul class = “pager” >
< li class = “previous” >< a >← Backward </ a ></ li >
< li class = “next disabled” >< a > Forward → </ a ></ li >
< /ul >
< /body >
</ html >
The above code will generate the following result:
OUTPUT:
