Bootstrap Pagination
Introduction
In this tutorial, we will see how to use Bootstrap to create pagination.
Multi-page Pagination
If you want to create pagination for the search results of your online application, website, or app, you can use this type of pagination.
The CSS class "pagination" in bootstrap.css, located at line numbers 2756 to 1814, contains the styles for creating this type of pagination.
Two other CSS classes, "disabled" and "active", can be used to customize whether the links in pagination are clickable or not. Line numbers 2793 to 2797 contain the styles for the "disabled" class and some other classes used for pagination. Line numbers 2786 to 2792 contain the styles for the "active" class used for pagination.
To set the alignment of pagination links, use the "pagination-centered" and "pagination-right" CSS classes. These two classes are located at line numbers 2809 to 2814 in bootstrap.css (version 2.0.1).
Multi-page Pagination Example
Example
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Multi-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.html" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<div class="pagination">
<ul>
<li><a href="../index.html">Prev</a></li>
<li class="active">
<a href="../index.html">1</a>
</li>
<li><a href="../index.html">2</a></li>
<li><a href="../index.html">3</a></li>
<li><a href="../index.html">4</a></li>
<li><a href="../index.html">Next</a></li>
</ul>
</div>
</body>
</html>
View example online
Please note that the extra style of adding a margin to the body element is only for the purpose of the example demonstration.
Pager
Sometimes, you may need the first type of pagination mentioned in the first part of this tutorial. However, at other times, you may only need simple links like next/previous or old/new to provide navigation for users. This can be achieved with the pager.
The "pager" CSS class is located at line numbers 2815 to 2850 in bootstrap.css (version 2.0.1). Here, you can apply the "disabled" CSS class to make links unclickable.
Pager Example with next and previous
Example
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Pager Example with next and previous</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.html" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class="pager">
<li>
<a href="../index.html">Previous</a>
</li>
<li>
<a href="../index.html">Next</a>
</li>
</ul>
</body>
</html>
View example online
Pager Example with old and new
Example
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Pager Example with old and new</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.html" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class="pager">
<li class="previous">
<a href="../index.html">← Older</a>
</li>
<li class="next">
<a href="../index.html">Newer →</a>
</li>
</ul>
</body>
</html>
View example online
Click here to download all the HTML, CSS, JS, and image files used in this tutorial.
Other Extensions