React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add pagination buttons and progress bar with React Bootstrap.

Pagination

We can add pagination buttons with the Pagination component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Pagination from "react-bootstrap/Pagination";
let active = 2;
let items = [];
for (let num = 1; num <= 10; num++) {
  items.push(
    <Pagination.Item key={num} active={num === active}>
      {num}
    </Pagination.Item>
  );
}
export default function App() {
  return (
    <>
      <Pagination>{items}</Pagination>
    </>
  );
}

We have the Pagination component, which has Pagination.Item components inside them to display pagination links.

Also, on each item, we set the active prop to highlight the one that’s active.

More Options

We can add buttons for going to the first page, the previous page, the next page, the last page and show ellipsis.

#technology #software-development #web-development #javascript #programming