Pagination is used when there are multiple pages or when it is required to show only limited number of posts for every single page. This is mostly seen while working with search engines. Bootstrap Pagination is used in applications that assigns numbers to the pages. In Bootstrap pagination tutorial, the following topics will be explained:
Active State
Disabled State
Size of Pagination
Examples
In the below example,.pagination class is added to an <ul> element.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Pagination</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>
</div>
</body>
</html>
[/html]
Output:
Pagination States
Description
Active States
Active state of pagination indicates that the button with special color is the current page. To make a page active, add .active class to <li>
Disabled States
To make a link unclickable, the class .disabled is used. This can be applied when there are no more pages to show.
Example
In the below example, the unordered list is applied with pagination and the list items have the numbers representing that there are five pages of content. The first and last items are disabled, hence, when tried to click on those buttons, no result can be found. The second list item i.e. page "1" is under active state which represents that the current page is 1.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Pagination with Disabled and Active States</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1</span></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 class="disabled"><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
[/html]
Output:
Bootstrap Pager
Description
To make pagination easy, the bootstrap pager is used to provide "Previous" and "Next" links.
Pager can be aligned at the end of pages with the help of .previous and .next class.
Active and Disabled classes can be applied to this pager also.
Pagination size can be increased or decreased depending on the clickable area.
Same as the button size, relative sizing classes like .pagination-lg, or .pagination-sm or .pagination-xs are used for creating larger or smaller pagination that are applied to the .pagination base class.