Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create pagination in Bootstrap 4?
To implement pagination in our web application, we use the different classes provided to us in Bootstrap 4, like “pagination”, “page-item”, “active”, “disabled”, and so on. Pagination means specifying a page number for a particular page in a series of pages. This could apply to a web application that has lots of pages, a book, or any other entity that has a series of data that we only want to display a part of it at a time.
Let’s discuss more about these classes and how we can use them to create a paginated layout in the examples below −
Example 1
In this example, we will create a simple pagination layout wherein we will add the “pagination” class to the “ul” HTML element, and give its children “li” elements “page-item” and “page-link” class.
<html lang="en">
<head>
<title>How to create pagination in Bootstrap 4?</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>How to create pagination in Bootstrap 4?</h3>
<ul class="pagination">
<li class="page-item page-link">1</li>
<li class="page-item page-link">2</li>
<li class="page-item page-link">3</li>
</ul>
</body>
</html>
Example 2
In this example, along with adding pagination, we will ad an “active” class and a “disabled” class to the paginated items.
<html lang="en">
<head>
<title>How to create pagination in Bootstrap 4?</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>How to create pagination in Bootstrap 4?</h3>
<ul class="pagination">
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item disabled"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</body>
</html>
Example 3
In this example, let’s increase the size of the pagination using the “pagination-lg” class provided by Bootstrap 4.
<html lang="en">
<head>
<title>How to create pagination in Bootstrap 4?</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>How to create pagination in Bootstrap 4?</h3>
<ul class="pagination pagination-lg">
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item disabled"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</body>
</html>
Conclusion
In this article, we learned how to create a paginated layout in a web application using Bootstrap 4, with the help of three examples. In the first example, we used “page-item” and “page-link” class; in the second example, we used the “active” and “disabled” class for active and disabled items; and in third example, we used the “pagination-lg” class to increase the size of the pagination.
221 Views
