In many websites, we notice that when we search for something then all the related content is shown but if the number of content is large then it will make the website longer.
To solve this, there is pagination in the webpage i.e, the contents are divided into many pages and on clicking the user can navigate through the related contents.
Note: Pagination is used to manage a series of related content existing across multiple pages.
Approach: The pagination class is used to display the pagination on the website. Use a wrapping <nav> element to identify it as a navigation section to screen readers. Use the unordered list to create the list of pages with links.
Below is the procedure to implement simple pagination with customizing in Bootstrap.
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
Step 2:
- Add pagination class with <ul> tag for unordered list. Add the list items with class name page-items.
- In addition, as pages likely have more than one such navigation section, So provide a descriptive aria-label for the <nav> to reflect its purpose.
- To customize the links for each page, just remove “#” and add the desired link.
- For aligning it to center, use class justify-content-center in <ul>.
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<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>
</nav>
|
- Add pagination to each of the pages to make sure the link to the previous page is one less than the current page and the user can move around the pages easily.
Example:
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="text-align: center;">
<h2>GeeksforGeeks</h2><br><br>
<h3>Contents of Page 3</h3>
<br><br><br><br>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="Page2.html">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="Page1.html">1</a>
</li>
<li class="page-item">
<a class="page-link" href="Page2.html">2</a>
</li>
<li class="page-item">
<a class="page-link" href="Page3.html">3</a>
</li>
</ul>
</nav>
</body>
</html>
|
Page1.html: If the user is on page 1, “next page” contains a link to page 2. The following are the codes for the contents “Page1.html”, “Page2.html”, and “Page3.html”
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="text-align: center;">
<h2>GeeksForGeeks</h2><br><br>
<h3>Contents of Page 1</h3>
<br><br><br><br>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="Page1.html">1</a>
</li>
<li class="page-item">
<a class="page-link" href="Page2.html">2</a>
</li>
<li class="page-item">
<a class="page-link" href="Page3.html">3</a>
</li>
<li class="page-item">
<a class="page-link" href="Page2.html">Next</a>
</li>
</ul>
</nav>
</body>
</html>
|
Page2.html: If the user is on page 2, the “Previous” page contains a link to page 1, and the “next page” contains a link to page 3.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="text-align:center;">
<h2>GeeksforGeeks</h2><br><br>
<h3>Contents of Page 2</h3>
<br><br><br><br>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="Page1.html">
Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="Page1.html">1</a>
</li>
<li class="page-item">
<a class="page-link" href="Page2.html">2</a>
</li>
<li class="page-item">
<a class="page-link" href="Page3.html">3</a>
</li>
<li class="page-item">
<a class="page-link" href="Page3.html">
Next
</a>
</li>
</ul>
</nav>
</body>
</html>
|
Page3.html: If the user is on page 3, the “Previous” page contains a link to page 2.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="text-align:center;">
<h2>GeeksforGeeks</h2><br><br>
<h3>Contents of Page 3</h3>
<br><br><br><br>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="Page2.html">
Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="Page1.html">1</a>
</li>
<li class="page-item">
<a class="page-link" href="Page2.html">2</a>
</li>
<li class="page-item">
<a class="page-link" href="Page3.html">3</a>
</li>
</ul>
</nav>
</body>
</html>
|
Output: