Bootstrap - Pagination

Juhi Sinha
Last Updated: May 13, 2022

Introduction

We all know that when it comes to lists, such as displaying products or search results in systems, the goal is to organize them effectively so that they are easier to access for a user. Paging is required whenever we have a page with many items to display.

In this article, we are going to learn pagination in Bootstrap. So, without any further ado, let's get started!

 

What is Pagination?

Pagination is a technique for navigating between web pages. The Bootstrap pagination has a large block of connected links easy to skip and scale well.

If our website has a lot of pages, we might want to add pagination to each of them. The picture given below is the pagination of Google.

 

To make basic pagination, we'll need to include the following:

  • On a list group, the .pagination class is used to specify pagination.
  • Each pagination item in the group is specified using the .page-item class.
  • The .page-link class is used to define the pagination item's link.
<div class="container">
  <h3>Pagination</h3>                
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    </ul>
</div>

 

Output:

Active and Disabled states

The active state indicates which page is currently active. To make the user aware of which page they are on, add the class .active.

Example:

<div class="container">
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

 

Output:

In the above example, page 3 appears highlighted with blue as it is active.

The disabled state indicates the un-clickable current page. If a page is disabled for some reason, we can use the class .disabled.

Example:

<div class="container">
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="disabled"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

 

Output:

In the above example, page 3 appears grey as it is disabled.

Pagination Sizing

Additional classes can be used to change the size of the pagination group to bigger or smaller. We can have three different sizes of pagination that are as follows:

  • The .pagination class sets the default size.
  • A smaller size is achieved with the .pagination-sm class.
  • For a larger size, use the .pagination-lg class.
 <ul class="pagination pagination-lg">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
      </ul>
      <br>
      <ul class="pagination">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
      </ul>
      <br>
      <ul class="pagination pagination-sm">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
      </ul>

 

Output:

 

In the above example, there are different sizes of pagination. The middle pagination shows the default pagination size.

Pagination Positioning

Using flexbox utilities, we can change the alignment of pagination components. The pagination could be positioned to the right or center using the flexbox utility classes.

  • The group is aligned to the center using the .justify-content-center class.
  • To align the group to the right, use the .justify-content-end class.


Example:

<div class="container">
<ul class="pagination justify-content-center">

<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> 
</ul>
</div>

 

Output:

In the above example, we have placed the pagination in the center.

Aligned Links

The following example demonstrates the use of the alignment classes .previous and .next below:

<div class="container">
  
<ul class = "pager">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

</div>

Output:

In the above example, we can use digits in between Previous and Next.

Frequently Asked Questions

  1. In Bootstrap, which class is used for pagination?
    The .pagination class is used to specify pagination on a list group. Each pagination item in the group is specified using the .page-item class.
     
  2. What is pagination's purpose?
    Pagination acts as a page break, giving users time to consider their next move while also allowing them to jump from one set of items to the next. The pagination pattern's number list also allows users to see how many more pages they have to investigate.
     
  3. What is pagination?
    Pagination is a technique for navigating between web pages. The Bootstrap pagination has a large block of connected links easy to skip and scale well.

Key Takeaways

In this article, we've learned about Bootstrap Pagination. 

If you are curious to learn advanced front-end web development, Coding Ninjas is here with one of the best courses available, which you can find here

Thank you for reading!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think