Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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/[email protected]/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.
349 Views
