Twitter Bootstrap pagination tutorial

Last update on August 19 2022 21:51:33 (UTC/GMT +8 hours)

Introduction

In this tutorial, you will see how to create Pagination using Twitter Bootstrap.

Multicon-page pagination

If you want to create pagination for your online application or for search results with your site or app, you may use this kind of pagination.

CSS class "pagination" of bootstrap.css, which is located from line number 2756 to 1814 holds styles for creating this kind of pagination.

Two more CSS classes "disabled" and "active" may be used to make a link within the pagination clickable and non-clickable. Line number 2793 to 2797 hold styles for class "disabled" for pagination along with some other classes. Line number 2786 to 2792 has styles for "active" class for pagination.

To set the alignment of the pagination links, "pagination-centered" and "pagination-right" CSS classes are used. These are located from line number 2809 to 2814 of bootstrap.css (version 2.0.1).

Example of Multicon-page pagination

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Multicon-page pagination example</title> 
<meta name="description" content="Twitter Bootstrap Multicon-page pagination example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
 <li class="active">
 <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="#">Next</a></li>
</ul>
</div>
</body>
</html>

Help us to serve you with Better content.

Note that additional style to add margin to body element is applied only for demonstration purpose.

View the example live.

Pager

Sometimes, you may not need that kind of pagination we have discussed in the first part of this tutorial. You may simply require next and previous or old and new links for your users to navigate. This is done with a pager.

The "pager" CSS class is located from line number 2815 to 2850 of bootstrap.css (Version 2.0.1). You may apply "disabled" CSS class to make a link non-clickable here too.

Example of pager with next and previous

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with next and previous example</title> 
<meta name="description" content="Twitter Bootstrap pager with next and previous example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class="pager">
<li>
<a href="#">Previous</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>
</body>
</html>

View the example live.

Example of pager with old and new

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with older and newer example</title> 
<meta name="description" content="Twitter Bootstrap pager with older and newer example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class="pager">
  <li class="previous">
    <a href="#">← Older</a>
  </li>
  <li class="next">
    <a href="#">Newer →</a>
  </li>
</ul>
</body>
</html>

View the example live.

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap breadcrumbs tutorial
Next: Twitter Bootstrap Alerts and Errors tutorial