React Bootstrap — Pagination and Progress Bar

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.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Pagination from "react-bootstrap/Pagination";

export default function App() {
  return (
    <>
      <Pagination>
        <Pagination.First />
        <Pagination.Prev />
        <Pagination.Item>{1}</Pagination.Item>
        <Pagination.Ellipsis />

        <Pagination.Item disabled>{10}</Pagination.Item>
        <Pagination.Item>{11}</Pagination.Item>
        <Pagination.Item active>{12}</Pagination.Item>
        <Pagination.Item>{13}</Pagination.Item>

        <Pagination.Ellipsis />
        <Pagination.Item>{20}</Pagination.Item>
        <Pagination.Next />
        <Pagination.Last />
      </Pagination>
    </>
  );
}

The Pagination.First component lets us add a button to go to the first page.

Pagination.Prev lets us add a button to go to the previous page.

Pagination.Ellipsis lets us show an ellipsis in the Pagination component.

Pagination.Next lets us add a button to go to the next page.

And Pagination.Last lets us add a button to go to the last page.

Progress Bar

A progress bar lets us show progress feedback to the user.

We can add one with the ProgressBar component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar now={80} />
    </>
  );
}

We just add the ProgressBar with the now prop to indicate the progress.

We can add a label with the label prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

const now = 80;
export default function App() {
  return (
    <>
      <ProgressBar now={now} label={`${now}%`} />
    </>
  );
}

The srOnly prop lets us make the label only available to screen readers, so it won’t be shown:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

const now = 80;
export default function App() {
  return (
    <>
      <ProgressBar now={now} label={`${now}%`} srOnly />
    </>
  );
}

Style Alternatives

We can add the variant prop to change the styles:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar variant="success" now={60} />
      <ProgressBar variant="info" now={23} />
      <ProgressBar variant="warning" now={30} />
      <ProgressBar variant="danger" now={86} />
    </>
  );
}

We add the variant with various names to style them differently.

Now the bars should have different colors.

Striped

We can add stripes to the bars with the striped prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar striped variant="success" now={60} />
      <ProgressBar striped variant="info" now={23} />
      <ProgressBar striped variant="warning" now={30} />
      <ProgressBar striped variant="danger" now={86} />
    </>
  );
}

Animated Stripes

To make them stripes animated, we can add the animated prop:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar animated variant="success" now={60} />
    </>
  );
}

Stacked

Multiple progress bars can be stacked.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function App() {
  return (
    <>
      <ProgressBar>
        <ProgressBar striped variant="success" now={25} key={1} />
        <ProgressBar variant="warning" now={20} key={2} />
        <ProgressBar striped variant="danger" now={10} key={3} />
      </ProgressBar>
    </>
  );
}

We add the key so that React can identify them.

And we add the variant to style them differently.

now has the progress.

They’re displayed one after the other.

Conclusion

We can add pagination with the Pagination component.

It has many pagination buttons and buttons for jumping to various pages.

React Bootstrap also comes with a progress bar component that can have various styles and labels.