Table of contents
1.
Introduction
2.
What is Pagination
3.
Pagination using Bootstrap
3.1.
With Icons
3.2.
Active and Disabled State
3.3.
Sizing
3.4.
Pagination Alignment
4.
Frequently Asked Questions
4.1.
What is pagination?
4.2.
In Bootstrap, which class is used for pagination?
4.3.
Can we disable a link in pagination?
4.4.
Can we change the size of the component?
4.5.
How to center the pagination component?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap - Pagination

Author dhananjay
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Bootstrap is an open-source framework that we can integrate into web projects to make our development easy. Bootstrap helps developers to save time by combining the already done templates of various sections in a website.

 Bootstrap - Pagination

This blog will tell you about pagination and how to implement the pagination component in your website with the help of bootstrap. We will also learn how to implement various styles in pagination using bootstrap classes.

Also See,  javascript replace

What is Pagination

Searching for something on google or any web browser will show you the result of your question. Google will show you the multiple solutions for the query with numerous pages. When you scroll down on the first page, you will see the link to the following pages. These numbers depend on the pages you have linked to your websites.

Google Pagination Example

This technique of linking web pages to navigate from one page to another is called pagination. The pagination technique is effective when you have multiple results to show in an organized way and only require the same template to display the data, like google links.

Links can be skipped, and you can jump to an x,y, or z page without going to one page at a time.

Pagination using Bootstrap

This section will implement the pagination using the Bootstrap framework. Before we start, ensure you have installed the bootstrap framework in our project. If you need help, follow the below instructions.

Install bootstrap using the console.

npm install bootstrap@5.3.0-alpha1


Or include the following CDN links in your <head></head> tag of the index.html file to use the Bootstrap templates or classes.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">


Add the following CDN before </body> for fast loading.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>


Example

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
       <title>Code Studio</title>
   </head>
   <body>
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   </body>
</html>


Let's implement the pagination using bootstrap.

To implement the pagination technique, you need to include the .pagination class in the <ul> tag. Then include the .page-item class in <li> and the .page-link class in <a> tags.

Code

<div>
    <h3>Pagination Example</h3>
    <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="#">next</a>
        </li>
    </ul>
</div>


Output

pagination example

With Icons

You can include the backward and forward arrow icons in your pagination component; just add ‘&laquo;’ for backward and ‘&raquo;’ for the forward arrow at the start and end of the pagination component.

Code

<div>
    <h3>Pagination Example</h3>
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#">&laquo;</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="#">&raquo;</a>
        </li>
    </ul>
</div>


Output

pagination example with icons

Active and Disabled State

You can add the active and disabled states in your pagination component. Add the .active or .disabled class in the <li> tag you want to make the current page active or disabled.

.active class

Code

<div>
   <h3>Pagination Example</h3>
   <ul class="pagination">
       <li class="page-item">
           <a class="page-link" href="#">«</a>
       </li>
       <li class="page-item">
           <a class="page-link" href="#">1</a>
       </li>
       <li class="page-item active">
           <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="#">»</a>
       </li>
   </ul>
</div>

 

Output

pagination example with active class

 

.disabled class

We will use the .disable class to disable a link to the pagination component. Add the .disable class with a .page-item class in <li> tag.

Code

<div>
    <h3>Pagination Example</h3>
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#">&laquo;</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 disabled">
            <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">&raquo;</a>
        </li>
    </ul>
</div>


Output

pagination example with disabled class

Sizing

You can change the sizes of the pagination component with the help of bootstrap classes.

If you want your component to appear small, include the .pagination-sm class.
 

.pagination-sm class

Code

<div>
    <h3>pagination-sm Example</h3>
    <ul class="pagination pagination-sm">
        <li class="page-item">
            <a class="page-link" href="#">&laquo;</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 disabled">
            <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">&raquo;</a>
        </li>
    </ul>
</div>

 

.pagination-md class

If you want to be your pagination of medium size, add .pagination-md class in the <ul> tag.

Code

<div>
    <h3>pagination-md Example</h3>

    <ul class="pagination pagination-md">
        <li class="page-item">
            <a class="page-link" href="#">&laquo;</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 disabled">
            <a class="page-link" href="#">4</a>
        </li>

        <li class="page-item">
            <a class="page-link" href="#">&raquo;</a>
        </li>
    </ul>
</div>

 

.pagination-lg class

Include the .paginatiob-lg class in the <ul> tag to make your component large.

Code

<div>
    <h3>pagination-lg Example</h3>

    <ul class="pagination pagination-lg">
        <li class="page-item">
            <a class="page-link" href="#">&laquo;</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 disabled">
            <a class="page-link" href="#">4</a>
        </li>

        <li class="page-item">
            <a class="page-link" href="#">&raquo;</a>
        </li>
    </ul>
</div>


Output

different font sizes of pagination

Pagination Alignment

To change the alignment or position of the component, you need to include some classes. Bootstrap has classes you can use in your component to change its positions.

Alignment at Start

Add justify-content-start in the <ul> tag to make the pagination component appear at the start and is the default position for the pagination.

Code

<div>
    <h3>Start</h3>

    <ul class="pagination justify-content-start">
        <li class="page-item">
            <a class="page-link" href="#">&laquo;</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 disabled">
            <a class="page-link" href="#">4</a>
        </li>

        <li class="page-item">
            <a class="page-link" href="#">&raquo;</a>
        </li>
    </ul>
</div>

 

Center the component

Use .justify-content-center in the <ul> tag to center the pagination component in your project.

Code

<div>
   <h3>Center</h3>
   <ul class="pagination justify-content-center">
       <li class="page-item">
           <a class="page-link" href="#">«</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 disabled">
           <a class="page-link" href="#">4</a>
       </li>
       <li class="page-item">
           <a class="page-link" href="#">»</a>
       </li>
   </ul>
</div>

 

Alignment at End

Use .justify-content-end in the <ul> tag to make the pagination component appear at the end of the line in your project.

Code

<div>
    <h3>End</h3>

    <ul class="pagination justify-content-end">
        <li class="page-item">
            <a class="page-link" href="#">&laquo;</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 disabled">
            <a class="page-link" href="#">4</a>
        </li>

        <li class="page-item">
            <a class="page-link" href="#">&raquo;</a>
        </li>
    </ul>
</div>


Output

different alignments of pagination

Frequently Asked Questions

What is pagination?

Pagination is the technique of linking web pages to navigate from one page to another.

In Bootstrap, which class is used for pagination?

To implement the pagination component, we need to use .pagination class and link each element with .page-item to apply the styling.

Can we disable a link in pagination?

With the .disabled class, you can disable any link. You must include it in that page's <li> tag.

Can we change the size of the component?

Yes, you can change the size of the pagination component. To make it small, use .pagination-sm class; to make it larger, use the .pagination-lg class in the code.

How to center the pagination component?

With .justify-content-center, you can center the component.

Conclusion

In this blog, we have learned how to implement pagination using the bootstrap framework. We have implemented different styles of pagination available in bootstrap.

You can check out the following links for more bootstrap information.

To learn more about DSA, competitive coding, and many more knowledgeable topics, please look into the guided paths on Coding Ninjas Studio. Also, you can enroll in our courses and check out the mock test and problems available to you. Please check out our interview experiences and interview bundle for placement preparations.

Happy Coding!

Live masterclass