Bootstrap Pagination

In bootstrap, the pagination component lets you navigate through the multiple pages of your website, posts, search results, or pages.

To implement the pagination in bootstrap, you need to create an unordered list <ul> element with .pagination class in <nav> component. After that, add pagination list items to an unordered list (<ul>) using <li> element with .page-item class and add a link <a> element inside of <li> element with .page-link class.

The above example will return the result as shown below.

Bootstrap Pagination States

In bootstrap, for pagination items, 2 states are available; those are active and disabled states. The active state indicates that the current page in the pagination items, and the disabled state indicates that the specific item is not available to navigate.

To make the pagination item active, add .active class to the respective <li> element. Same way, to disable the pagination item, add .disabled class to the respective <li> element.

The above example will return the result as shown below.

Bootstrap Pagination Sizes

In bootstrap, for pagination 3 sizes are available those are small, default, and large. To change the default size of pagination to large or small, you need to add either .pagination-lg or .pagination-sm class to <ul> element.

The above example will return the result as shown below.

Bootstrap Pagination Alignment

By default, the pagination component will be aligned to the left. In case if you want to align the pagination to center or right, then you need to add .justify-content-center or .justify-content-end class to the <ul> element.

The above example will return the result as shown below.

This is how we can use the pagination component in our applications based on our requirements.