React Bootstrap Pagination

Pagination on a web page is one of the most useful components for navigating through different pages. It provides easy navigation for a multi-page website. The React Bootstrap pagination component is a powerful component that provides a large block of connected links with pre-applied styles. The React Bootstrap pagination is easily scalable; we could have any number of pages in the pagination list.

Let's understand how to create pagination in a React application using Bootstrap.

How to Create Pagination in a React Application?

To create pagination in a React application using React Bootstrap, we can use the <Pagination> and <Pagination.Item> components. It will render default styles pagination of the Bootstrap. The active prop is used to display an active pagination item. The Pagination component is imported as follows:

Let's create basic pagination using the Pagination component.

App.js:

Output:

Pagination Sizes

We can use the size prop to specify the pagination size. We can use lg or sm values for large and small sizes.

Consider the below example:

App.js:

Output:

From the above output, the paginations with different sizes are rendered on our web browser.

More Controls

The pagination component supports several components to create a more complex pagination UI. We can specify the first, previous, next, and last buttons in paginations using these sub-components. We can also have an ellipsis item to indicate the previous or continued navigations.

Consider the below example:

App.js:

Output:

From the above output, we have created pagination with a complex UI structure.

However, the above paginations are static; to make them dynamic, we can bind them using JavaScript with the help of Array methods.

Thus, we can easily create different styles for pagination using the React Bootstrap.