Bootstrap Pagination

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:

  1. Default Pagination
  2. Disabled and Active States
  3. Sizing
  4. Pager
  5. Aligned Links
  6. Optional Disabled State

also read:

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>

Bootstrap Default Pagination Example

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>

Bootstrap Disabled and Active States Example

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>

Bootstrap Sizing Pagination Example

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>

Bootstrap Pager Example

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>

Bootstrap Alignment and Disabled State Example

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*