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.
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.
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