1) create multiple page on single webpage
2) manage product or content or record from database using pagination method
3) large mysql data content want to fetch but it should easy to view in that case use pagination method.
4) Pagination is a method of dividing web content into discrete pages, thus presenting content in a limited and digestible manner. This method is usually employed to display resulting items on a website.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Pagination</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<p>this use to manage large content in pagination style like book content maintain over multiple pages because not possible on same page, control page size</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
</div>
</body>
</html>
just call page-item class , in bootstrap all style are predefined with some class name , just find that class name and use it. for example page-link is default class in bootstrap
Thank you for viewing blog, please comment if any query.
