• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Pagination

June 25, 2014 //  by Krishna Srinivasan//  Leave a Comment

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:

  • 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

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>
  • Run Bootstrap Disabled and Active States Example Demo

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>
  • Run Bootstrap Sizing Pagination Example Demo

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>
  • Run Bootstrap Pager Example Demo

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>
  • Run Bootstrap Alignment and Disabled State Example Demo

Bootstrap Alignment and Disabled State Example

Category: BootstrapTag: Bootstrap Components

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.

Previous Post: « Bootstrap Breadcrumbs
Next Post: Bootstrap Labels »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact