How do i create Pagination with Bootstrap5 and Active/Disable state

Last updated Sep 27, 2021

In this Bootstrap5 example tutorial we will create a Pagination with Bootstrap5 pagination class. Normally pagination is used to load the large amount of data into multiple pages.

We will cover

  1. Create Pagination
  2. Size of the Pagination
  3. Alignment of the Pagination
  4. Active pagination

 

Let's see simple Bootstrap5 Pagination example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
     
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Paginaton Example</title>
   </head>
   
   <body >
   <div style=" display: flex;
    align-items: center;
    justify-content: center;">
   <div style="width:600px;">

<div class = "container">
         <h2>Basic Boostrap5 Pagination Example</h2>
    <div style="height:200px;">
        Demo Text
    </div>
         <nav>
            <ul class = "pagination">
               <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 = "#">4</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">5</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">Next</a>
               </li>
            </ul>
         </nav>
      </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

This will gives the below output

Pagination in HTML with Bootstap5 pagination class

 

How to make active and disable the page navigation indicator

In the above example we implemented simple Pagination, now we will set active and disable state of the pages

To make active state we will use .active class and to disable use .disable class.

Below code will show how to make active and disable the numbers

<div class = "container">
         <p><strong>Basic Boostrap5 Pagination Example<strong></p>
    <p>Active Pagination Example</p>
         <nav>
            <ul class = "pagination">
               <li class = "page-item  active">
                  <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 = "#">4</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">5</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">Next</a>
               </li>
            </ul>
         </nav>
    <p>Disable state Pagination Example</p>
         <nav>
            <ul class = "pagination">
               <li class = "page-item  active">
                  <a class = "page-link" href = "#">Previous</a>
               </li>
               <li class = "page-item disabled">
                  <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 = "#">4</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">5</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">Next</a>
               </li>
            </ul>
         </nav>
      </div>
How to create pagination with Bootstrap5

 

 

 

We have other options like show pagination small and large and align the pagination at left or right

pagination-sm
pagination-lg
justify-content-center
justify-content-end

 

These properies will used to set the Pagination alignment and size of the page indicatiors

 

Let's see the example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
     
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Paginaton Example</title>
   </head>
   
   <body  style="padding:20px;">
   <div style=" display: flex;
    align-items: center;
    justify-content: center;">
   <div style="width:600px;">

<div class = "container">
         <p><strong>Basic Boostrap5 Pagination Example<strong></p>
    <p>Align  pagination at end with large size</p>
         <nav>
            <ul class = "pagination justify-content-end pagination-lg">
               <li class = "page-item  active ">
                  <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 = "#">4</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">5</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">Next</a>
               </li>
            </ul>
         </nav>
    <p>Align pagination center with small size Pagination Example</p>
         <nav>
            <ul class = "pagination">
               <li class = "page-item  active justify-content-center pagination-sm">
                  <a class = "page-link" href = "#">Previous</a>
               </li>
               <li class = "page-item disabled">
                  <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 = "#">4</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">5</a>
               </li>
               <li class = "page-item">
                  <a class = "page-link" href = "#">Next</a>
               </li>
            </ul>
         </nav>
      </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

 

How do align the pagination center in html

 

 

Conclusion: In this bootstrap example we learned how to create a pagination in html with bootstrap5 and how to align the pagination center, end and also set the size of the pagination

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

824 Views
Projects By category
Categories