❮ Bootstrap V2 Button Plugin Bootstrap Transition Plugin ❯

Bootstrap Pagination

Introduction

In this tutorial, we will see how to create pagination using Bootstrap.

Multi-page Pagination

If you want to create pagination for search results in 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, holds the styles for creating this type of pagination.

Two additional CSS classes, "disabled" and "active," can be used to customize whether the links in the pagination are clickable or not. Line numbers 2793 to 2797 hold the styles for the "disabled" class and other related classes for pagination. Line numbers 2786 to 2792 hold the styles for the "active" class for pagination.

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

Multi-page Pagination Example

Example

<!DOCTYPE html>
<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" 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>

Note that the additional styling to add margin to the body element is just for demonstration purposes.

Pager

Sometimes, you might need the first type of pagination mentioned in the first part of this tutorial. However, at times, you may only need simple links like next/previous or old/new for navigation. This can be achieved with a pager.

The "pager" CSS class is located at line numbers 2815 to 2850 (version 2.0.1) in bootstrap.css. Here, you can apply the "disabled" CSS class to make the links unclickable.

Pager Example with Next and Previous

Example

<!DOCTYPE html>
<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" 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>

</html>

Example of Pagination with Old and New

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap Example of Pagination with Old and New</title>
    <meta name="description" content="Twitter Bootstrap pager example with older and newer links">
    <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>

Click here to download all HTML, CSS, JS, and image files used in this tutorial.

❮ Bootstrap V2 Button Plugin Bootstrap Transition Plugin ❯