English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 Pagination

Pagination is the process of organizing content by dividing it into separate pages.
Pagination is frequently used in almost every web application in some form or another, for example, search engines use pagination to display a limited number of search results on the search results page, or to display a limited number of articles on each page of a blog or forum.

During the web development process, if there is too much content, it is generally necessary to do pagination processing.

Bootstrap 4 It is very simple to implement the pagination effect.

To create a basic pagination, you can add the .pagination class to the <ul> element. Then add the .page class to the <li> element.-item class::

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Pagination item class:</h2>
　　<p>To create a basic pagination, add the .pagination class to the ul element. Then add the .page-item class:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
</div>
</body>
</html>
Test and See ‹/›

Current page page number status

The current page can be highlighted using the .active class:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Current page page number status</h2>
　　<p>The current page can be highlighted using the .active class:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item active><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
</div>
</body>
</html>
Test and See ‹/›

Non-clickable pagination links

.disabled class can set pagination links to be non-clickable:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Non-clickable pagination links</h2>
　　<p>.disabled class can set pagination links to be non-clickable:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item disabled><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
</div>
</body>
</html>
Test and See ‹/›

Pagination display size

You can set pagination items to different sizes.

.pagination-lg class sets large font pagination items, .pagination-sm class sets small font pagination items:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Pagination display size</h2>
　　<p>.pagination-lg class sets large font pagination items, .pagination-sm class sets small font pagination items:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination pagination-lg">
　　　　<li class="page-item><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
　　　
　　<ul class="pagination pagination-sm">
　　　　<li class="page-item><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
</div>
</body>
</html>
Test and See ‹/›

Breadcrumb navigation

.breadcrumb and .breadcrumb-item Class used to set breadcrumb navigation:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div class="container">
　　<h2>Breadcrumb Navigation</h2>
　　<p>.breadcrumb and .breadcrumb-The item class is used to set breadcrumb navigation: </p>　　　　　　　　　　　　　　　　　　
　　<ul class="breadcrumb">
　　　　<li class="breadcrumb-item"><a href="#">Photos</a></li>
　　　　<li class="breadcrumb-item"><a href="#">Summer　2017</a></li>
　　　　<li class="breadcrumb-item"><a href="#">Italy</a></li>
　　　　<li class="breadcrumb-item active">Rome</li>
　　</ul>
</div>
</body>
</html>
Test and See ‹/›
Bootstrap4 List GroupsBootstrap4 Progress Bar