In this article, we are going to discuss the pagination feature of Bootstrap v4. Pagination is the phenomenon by which we can navigate through the links that connect to multiple pages within a series. E.g., when we search something that returns a large number of records which cannot be displayed on a single web page therefore, those records are split into number of pages that can be accessed through links via pagination mechanism. It enables the user to navigate to the next page one after the other and even jump forward to the several pages.
Default Pagination
In Bootstrap v4, we can create the default pagination through the class=”pagination” applied to the <ul> element that represents the list of pages. We can add .page-item to each of the <li> element and .page-link to each of the <a> element.
In Bootstrap v3.x.x, we need to only apply the .pagination class. However, in Bootstrap v4 we need to apply .page-item class to each of the <li> element and .page-link to each if the <a> element in addition to the .pagination class for the <ul> element.
The following is an example that demonstrates the default pagination.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap 4 alpha CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <title>Default Pagination</title> </head> <body> <br> <div align="center"> <nav> <ul class="pagination"> <li class="page-item"><a href="#" class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> </a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link">5</a></li> <li class="page-item"><a href="#" class="page-link">6</a></li> <li class="page-item"><a href="#" class="page-link">7</a></li> <li class="page-item"><a href="#" class="page-link">8</a></li> <li class="page-item"><a href="#" class="page-link">9</a></li> <li class="page-item"><a href="#" class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </ul> </nav> </div> <br> <!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Output
Active Page from Pagination
If want to show the current active page from the pagination links then we just need to add the .active class to the <li> element as shown below.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap 4 alpha CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <title>Active Page from Pagination</title> </head> <body> <br> <div align="center"> <nav> <ul class="pagination"> <li class="page-item"><a href="#" class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> </a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item active"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link">5</a></li> <li class="page-item"><a href="#" class="page-link">6</a></li> <li class="page-item"><a href="#" class="page-link">7</a></li> <li class="page-item"><a href="#" class="page-link">8</a></li> <li class="page-item"><a href="#" class="page-link">9</a></li> <li class="page-item"><a href="#" class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </ul> </nav> </div> <br> <!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Output
Disabling an Option for Pagination links
If want to disable an option for any page link from the pagination list then we just need to add the .disabled class to the <li> element in order to disable that option as shown below.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap 4 alpha CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <title>Active Page from Pagination</title> </head> <body> <br> <div align="center"> <nav> <ul class="pagination"> <li class="page-item"><a href="#" class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> </a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item active"><a href="#" class="page-link">2</a></li> <li class="page-item disabled"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link">5</a></li> <li class="page-item disabled"><a href="#" class="page-link">6</a></li> <li class="page-item"><a href="#" class="page-link">7</a></li> <li class="page-item"><a href="#" class="page-link">8</a></li> <li class="page-item disabled"><a href="#" class="page-link">9</a></li> <li class="page-item"><a href="#" class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </ul> </nav> </div> <br> <!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Output
In the above output, we have disabled the links 3, 6 and 9 among the pagination list. All these page numbers are shown in grey colors since they are disabled or inactive and all other numbers are shown in blue color since they are enabled or active.
Size of Pagination
In Bootstrap v4, we can increase or decrease the size of the pagination (Large, Default or Small) with the help of the .pagination-lg or .pagination-sm class respectively by simply adding this class to the <ul> element as shown in the example below:
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap 4 alpha CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> <title>Size of Pagination</title> </head> <body> <br> <div align="center"> <nav> <!-- Large Size --> <ul class="pagination pagination-lg"> <li class="page-item"><a href="#" class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> </a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item active"><a href="#" class="page-link">2</a></li> <li class="page-item disabled"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </ul><br> <!-- Default Size --> <ul class="pagination"> <li class="page-item"><a href="#" class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> </a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item active"><a href="#" class="page-link">2</a></li> <li class="page-item disabled"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </ul><br> <!-- Small Size --> <ul class="pagination pagination-sm"> <li class="page-item"><a href="#" class="page-link" aria-label="Previous"> <span aria-hidden="true">«</span> </a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item active"><a href="#" class="page-link">2</a></li> <li class="page-item disabled"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </ul> </nav> </div> <br> <!-- jQuery first, then Bootstrap JS. All Inclusive Plug-in --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Output
In the above output, first pagination is the large size pagination (i.e. .pagination-lg class), second is the default size pagination (i.e. .pagination class) and third is the small size pagination (i.e. .pagination-sm class). It can also be noted that number 3 is disabled here.
Source Code for the Pagination class in Bootstrap V4
Conclusion
In this article, we discussed about the pagination and its interesting features for Bootstrap v4. These features can clearly be understood with the help of demo examples.
