React Bootstrap — Spinners and Tables

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 spinners with React Bootstrap.

Spinners

Spinners are used to show the loading state of our data.

To use it, we can use the Spinner component:

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

export default function App() {
  return (
    <>
      <Spinner animation="border" role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
    </>
  );
}

We add the Spinner with the animation prop.

border means that we have a circle that spins as the spinner.

We can also add text for screen readers with the sr-only class.

It’ll be read by screen readers but users won’t see them.

Animations

We can also set the animation prop to grow .

Then we’ll get a throbbing spinner:

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

export default function App() {
  return (
    <>
      <Spinner animation="grow" role="status">
        <span className="sr-only">Loading...</span>
      </Spinner>
    </>
  );
}

Variants

There’re various styling variants for spinners.

All the common Bootstrap ones are available.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Spinner animation="border" variant="primary" />
      <Spinner animation="border" variant="secondary" />
      <Spinner animation="border" variant="success" />
      <Spinner animation="border" variant="danger" />
      <Spinner animation="border" variant="warning" />
      <Spinner animation="border" variant="info" />
      <Spinner animation="border" variant="light" />
      <Spinner animation="border" variant="dark" />
      <Spinner animation="grow" variant="primary" />
      <Spinner animation="grow" variant="secondary" />
      <Spinner animation="grow" variant="success" />
      <Spinner animation="grow" variant="danger" />
      <Spinner animation="grow" variant="warning" />
      <Spinner animation="grow" variant="info" />
      <Spinner animation="grow" variant="light" />
      <Spinner animation="grow" variant="dark" />
    </>
  );
}

Then we get spinners with different colors and animation styles.

Sizes

We can also change the sizes of the spinner,

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Spinner animation="border" size="sm" />
      <Spinner animation="border" />
      <Spinner animation="grow" size="sm" />
      <Spinner animation="grow" />
    </>
  );
}

to set the size with the size prop.

sm means smaller than the normal size.

We can also write lg to make them bigger than normal.

Buttons

We can put spinners in buttons.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Button variant="success" disabled>
        <Spinner as="span" animation="border" size="sm" />
        <span className="sr-only">Loading...</span>
      </Button>{" "}
      <Button variant="success" disabled>
        <Spinner as="span" animation="grow" size="sm" />
        Loading...
      </Button>
    </>
  );
}

to create buttons with the Spinner inside.

We make them small so they’re sized the same as the button text.

Tables

We can add tables with React Bootstrap.

It comes with the Table component to let us create simple tables:

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

export default function App() {
  return (
    <>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>mary</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

We just wrap the Table around the regular table elements to create a table.

striped makes the rows alternate in color.

bordered adds borders to the rows.

hover changes the color of the row when we highlight it.

Small Table

We can set the size prop to change the size of the table.

For instance, we can write:

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

export default function App() {
  return (
    <>
      <Table striped bordered hover size="sm">
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>mary</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

Then the rows are smaller than usual.

Dark Table

We can set the variant prop to dark to make it dark:

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

export default function App() {
  return (
    <>
      <Table striped bordered hover variant="dark">
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>mary</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

Now all the rows are dark.

Conclusion

We can add spinners to show that something is loading.

Tables can be added with the Table component.