HTML Tutorial

Bootstrap Pagination

Bootstrap Tutorial » Bootstrap Pagination

Bootstrap 3 includes two components to paginate the contents of your site or web application.
1. is a full pager that displays links for all results pages
2. is a simple pager with Previous and Next links.

A basic pagination in Bootstrap looks like this:

Creating Pagination with Bootstrap - example

To create a basic pagination, add the .pagination class to an <ul> element:

Usualy is used in search engines for displaying a limited number of results on search results pages, or showing a limited number of posts for every page on a blog or forum.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Creating Pagination with Bootstrap - example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <h2>Creating Pagination with Bootstrap - example</h2>

  <p>The .pagination class provides pagination links:</p> 

  <ul class="pagination">

  <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>

  </div>
</body>

  </html>

Pagination with Disabled and Active States - example

Use the class .disabled for making the links disabled and .active to indicate the current page.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Pagination with Disabled and Active States Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<div class="container">

  <h2>Pagination with Disabled and Active States</h2>

  <p>Add class .active or .disabled to let the user know which page he/she is on/off:</p>

  <ul class="pagination">

  <li class="page-item disabled"><a href="#" class="page-link" tabindex="-1">Previous</a></li>

  <li class="page-item active"><a href="#" class="page-link">1</a></li>

  <li class="page-item"><a href="#" class="page-link">2</a></li>

  <li class="page-item"><a href="#" class="page-link">3</a></li>

  <li class="page-item"><a href="#" class="page-link">4</a></li>

  <li class="page-item"><a href="#" class="page-link">5</a></li>

  <li class="page-item"><a href="#" class="page-link">Next</a></li>

  </ul>

</div>
</body>

</html>

Pagination Sizing - example

Thanks to the special CSS classes .pagination-lg and .pagination-sm you can make the pager bigger or smaller respectively. Example:

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

<title>Pagination Sizing - example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">

  <h2>Pagination Sizing - example</h2>

  <p>Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.</p>
 <p>Large:</p>

  <ul class="pagination pagination-lg">

  <li class="page-item disabled"><span class="page-link">Previous</span></li>

  <li class="page-item active"><a href="#" class="page-link">1</a></li>

  <li class="page-item"><a href="#" class="page-link">2</a></li>

  <li class="page-item"><a href="#" class="page-link">3</a></li>

  <li class="page-item"><a href="#" class="page-link">4</a></li>

  <li class="page-item"><a href="#" class="page-link">5</a></li>

  <li class="page-item"><a href="#" class="page-link">Next</a></li>

  </ul>
 <p>Default:</p>

  <ul class="pagination pagination">

  <li class="page-item disabled"><span class="page-link">Previous</span></li>

  <li class="page-item active"><a href="#" class="page-link">1</a></li>

  <li class="page-item"><a href="#" class="page-link">2</a></li>

  <li class="page-item"><a href="#" class="page-link">3</a></li>

  <li class="page-item"><a href="#" class="page-link">4</a></li>

  <li class="page-item"><a href="#" class="page-link">5</a></li>

  <li class="page-item"><a href="#" class="page-link">Next</a></li>

  </ul>
 <p>Small:</p>

  <ul class="pagination pagination-sm">

  <li class="page-item disabled"><span class="page-link">Previous</span></li>

  <li class="page-item active"><a href="#" class="page-link">1</a></li>

  <li class="page-item"><a href="#" class="page-link">2</a></li>

  <li class="page-item"><a href="#" class="page-link">3</a></li>

  <li class="page-item"><a href="#" class="page-link">4</a></li>

  <li class="page-item"><a href="#" class="page-link">5</a></li>

  <li class="page-item"><a href="#" class="page-link">Next</a></li>

  </ul>

  </div>
</body>

  </html>

Bootstrap Pagination table, demo, codepen, jquery, center, color, example with data, react, with dots
Bootstrap Pagination - bootstrap

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.