Learn how to use the Pagination Class in Bootstrap 4



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.



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.



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.



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:



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

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.


Please enter your comment!
Please enter your name here