Bootstrap 4 Pagination is used to enable navigation between pages on a website. It is the process of organizing content by dividing it into separate pages. For e.g., If you have a web site with lots of pages than you can sort them using pagination. To create pagination, add the .pagination class to an <ul> element.
Basic Pagination:
To create basic bootstrap 4 pagination, add class .pagination to the <ul> element that represents the list of pages. Also add .page-item class to each <li> element and .page-link class to each <a> element.
Active State:
Use .active class for making the current page number or pagination links stand out from the others. You will use the .active class in the <li> element as shown in the example below:
Disabled State:
By using .disabled class, you can make pagination links unclickable. This may be used for disabling the ‘Next’ or ‘Previous’ button. The .disabled class internally makes use of ‘pointer-events: none’ to make the pagination link unclickable, however, as this specification is not always implemented, it is preferred to make it not possible to be navigated to by setting the ‘tabindex’ property to -1. This property controls whether an element can be navigated using the tab key.
Sizes of Pagination:
You can also change the sizes of pagination i.e. smaller or larger. Apply the relative sizing classes like .pagination-lg, or .pagination-sm to the .pagination base class for creating larger or smaller pagination. If you do not use these classes then pagination has the default size.
Alignment of Pagination:
The pagination is aligned horizontally left by default but you can also align the center of the page and aligned horizontally right. Use class .justify-content-center to align center of the page and .justify-content-end class to align at right.