Bootstrap Pagination If we are having more pages in web pages and we want to link up these pages than we can use pagination.
Basic Pagination
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Pagination </h2>
<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="#">4</a> </li>
<li class="page-item"> <a class="page-link" href="#">Next</a> </li>
</ul>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Pagination
So here we can add our pages like this and can go through any page we want to.
active class
This .active class is used to highlight the current page .
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Pagination </h2>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a> </li>
<li class="page-item active"><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="#">4</a> </li>
<li class="page-item"><a class="page-link" href="#">Next</a> </li>
</ul>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Pagination
Here through .active class we can highlight any of the pages.
Pagination Sizing
Definitely here also we can change the size of blocks . And we use .pagination class for it.
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Pagination-sizing</h2>
<p>Large:</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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
<p>Default: </p >
<ul class="pagination 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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
<p>Small: </p>
<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="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Pagination-sizing
Large:
Default:
Small:
Here we change the pagination-size.
