How to create pagination in Bootstrap 4?

Bootstrap Web Development Front End Technology

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.

Dishebh Bhayana

Updated on: 2023-02-22T11:34:27+05:30

394 Views

Kickstart Your Career

Get certified by completing the course

Get Started