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.
<!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="#">»</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.
<!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:
<!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
This tool makes it easy to create, adjust, and experiment with custom colors for the web.

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

Find here examples of creative and unique website layouts.

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