Pagination is the process of dividing the content into separate pages and provides pagination links with the multi-page pagination component. Pagination is often used in every web application which is used for displaying limited number of results on results pages.
This tutorial explains following topics which are used with bootstrap pagination:

Default Pagination
Disabled and Active States
Sizing
Pager
Aligned Links
Optional Disabled State

also read:

Bootstrap Setup

Bootstrap Typography

Foundation 3 Framework

JQuery Tutorials

The below examples shows the various techniques used for implementing the pagination in Bootstrap. If you have any questions about bootstrap pagination, please write it in the comments section.

Bootstrap Pagination

Bootstrap Default Pagination

We can create simple pagination with Bootstrap by using the .pagination class as shown in the following example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Default Pagination</h2>
<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><br><br>
<ul class="pagination">
	 <li><a href="#">Prev</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="#">Next</a></li>
</ul>
</div>
</body>
</html>

Run Bootstrap Default Pagination Example Demo

Disabled and Active States

We can disable the link by using .disabled class for unclickable links which disables hover effect on that link and to indicate current page number to the user by using .active class. The following is an example:

  <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Disabled and Active States</h2>
<ul class="pagination">
	 <li><a href="#">&laquo;</a></li>
	 <li><a href="#">1</a></li>
	 <li class="active"><a href="#">2</a></li>
	 <li><a href="#">3</a></li>
	 <li><a href="#">4</a></li>
	 <li class="disabled"><a href="#">5</a></li>
	 <li><a href="#">&raquo;</a></li>
</ul><br><br>
<ul class="pagination">
	 <li class="disabled"><a href="#">Prev</a></li>
	 <li><a href="#">1</a></li>
	 <li><a href="#">2</a></li>
	 <li class="active"><a href="#">3</a></li>
	 <li><a href="#">4</a></li>
	 <li><a href="#">5</a></li>
	 <li><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>

Run Bootstrap Disabled and Active States Example Demo

Sizing Pagination

We can increase the size of pagination to larger or smaller size by adding .pagination-lg or .pagination-sm to .pagination base class as shown in the following example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Larger Pagination</h2>
<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><br><br>
<h2>Smaller Pagination</h2>
<ul class="pagination pagination-sm">
	 <li><a href="#">Prev</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="#">Next</a></li>
</ul>
</div>
</body>
</html>

Run Bootstrap Sizing Pagination Example Demo

Bootstrap Pager

Sometimes we may require previous and next links or old and new links for simple navigation with light markup and styles to user instead of using complex pagination as discussed above. This can be done by using with .pager class. By default the links are centered. The following is an example of default pager:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Pager</h2>
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul><br>
<ul class="pager">
  <li><a href="#">Older</a></li>
  <li><a href="#">Newer</a></li>
</ul>
</div>
</body>
</html>

Run Bootstrap Pager Example Demo

Aligned Links and Disabled States

By default, the pager links are aligned center as shown in the above section. We can align the previous link to left and next link to right by using .previous and .next classes respectively. It is also possible to disable above links by using .disabled class. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alignment Links</h2>
<ul class="pager">
  <li class="previous"><a href="#">&larr; Previous</a></li>
  <li class="next"><a href="#">Next &rarr;</a></li>
</ul><br>
<h2>Disabled States</h2>
<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Previous</a></li>
  <li class="next"><a href="#">Next &rarr;</a></li></ul>
</div>
</body>
</html>

Run Bootstrap Alignment and Disabled State Example Demo