Pagination is used to enable navigation between pages in a website. The pagination used in Bootstrap has a large block of connected links that are hard to miss and are easily scalable.
The basic pagination can be specified using the following classes.
- The .pagination class is used to specify pagination on a list group.
- The .page-item class is used to specify each pagination item in the group.
- The .page-link class is used to specify the link in the pagination item.
The pagination links could be styled to make them appear unclickable by using the .disabled class. This may be used for disabling the ‘Previous’ or ‘Next’ button.
The .disabled class internally makes use of ‘pointer-events: none’ to make the 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.
The pagination links could be styled to highlight them as the current active page by using the .active class on the pagination item.
Sizing the pagination group:
The pagination group could be made larger or smaller by using additional classes. There are 3 possible sizes of input groups.
- The .pagination-sm class is used for a smaller size.
- The .pagination-lg class is used for a larger size.
- The .pagination class is the default size.
Alignment of the pagination group:
The pagination group could be aligned to the right or center by using the flexbox utility classes.
- The .justify-content-center class is used to align the group to the center.
- The .justify-content-end class is used to align the group to the right.
- Bootstrap (Part-7) | Alerts , Wells, Pagination and Pager
- CSS | Pagination
- PHP Pagination | Set 1
- PHP Pagination | Set 2
- PHP Pagination | Set 3
- How to make a Pagination using HTML and CSS ?
- Materialize CSS | Pagination
- Bulma | Pagination
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- Beginning BootStrap (Part-1) | Introduction and Installation
- Beginning BootStrap (Part-2) | Grid System
- Bootstrap (Part-3) | Buttons, Glyphicons, Tables
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- Bootstrap (Part-4) | Vertical Forms, Horizontal Forms, Inline Forms
- How to get circular buttons in bootstrap 4 ?
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- Bootstrap (Part-8) | Badges, Labels, Page Headers
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.