React Bootstrap — Alerts

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 work with React Bootstrap’s alerts in our React components.

Alerts

Alerts provide us with feedback for user actions with various styling.

For instance, we can write:

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

export default function App() {
  return (
    <>
      {[
        "primary",
        "secondary",
        "success",
        "danger",
        "warning",
        "info",
        "light",
        "dark"
      ].map((variant, index) => (
        <Alert key={index} variant={variant}>
          {variant}
        </Alert>
      ))}
    </>
  );
}

to display all varieties of alerts.

Also, we can add Alert.Link components to add links to the alerts.

For example, we can write:

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

export default function App() {
  return (
    <>
      {[
        "primary",
        "secondary",
        "success",
        "danger",
        "warning",
        "info",
        "light",
        "dark"
      ].map((variant, idx) => (
        <Alert key={idx} variant={variant}>
          {variant} <Alert.Link href="https://example.com">link</Alert.Link>.
        </Alert>
      ))}
    </>
  );
}

We used the Alert.Link component to add a link with a href to go to a URL.

Additional Content

We can also add whatever content we want.

There’s the Alert.Heading component to add a heading to the alert.

And the content can come below it.

For example, we can write:

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

export default function App() {
  return (
    <>
      {[
        "primary",
        "secondary",
        "success",
        "danger",
        "warning",
        "info",
        "light",
        "dark"
      ].map((variant, idx) => (
        <Alert variant={variant} key={idx}>
          <Alert.Heading>Title</Alert.Heading>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
          <hr />
          <p className="mb-0">
            Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
            porttitor, ornare ex et, finibus ante. Aenean mattis ligula lectus,
            a aliquet est pharetra et. Donec sit amet est massa. Maecenas dolor
            ante, congue sit amet mattis eu, vehicula quis nisl. Nulla viverra
            ligula vitae mollis sagittis. Fusce volutpat convallis purus.
            Vestibulum tincidunt elit id aliquam placerat. Vivamus vestibulum
            enim sed eros ullamcorper congue. Fusce nec tincidunt arcu. Sed sed
            suscipit justo, ac eleifend mauris. Morbi molestie turpis a accumsan
            mollis. Aenean vel diam vitae ante tincidunt varius.
          </p>
        </Alert>
      ))}
    </>
  );
}

We added an alert with a heading in the Alert.Heading component and some paragraphs below it.

Dismissing Alerts

We can make alerts dismissible with the dismissible prop.

For instance, we can write:

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

export default function App() {
  const [show, setShow] = React.useState(true);

return (
    <>
      <Button onClick={() => setShow(true)}>Show Alert</Button>
      {show && (
        <Alert variant="success" onClose={() => setShow(false)} dismissible>
          <Alert.Heading>Title</Alert.Heading>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </p>
          <hr />
          <p className="mb-0">
            Integer non ante ut arcu imperdiet maximus. Pellentesque id metus
            porttitor, ornare ex et, finibus ante. Aenean mattis ligula lectus,
            a aliquet est pharetra et. Donec sit amet est massa. Maecenas dolor
            ante, congue sit amet mattis eu, vehicula quis nisl. Nulla viverra
            ligula vitae mollis sagittis. Fusce volutpat convallis purus.
            Vestibulum tincidunt elit id aliquam placerat. Vivamus vestibulum
            enim sed eros ullamcorper congue. Fusce nec tincidunt arcu. Sed sed
            suscipit justo, ac eleifend mauris. Morbi molestie turpis a accumsan
            mollis. Aenean vel diam vitae ante tincidunt varius.
          </p>
        </Alert>
      )}
    </>
  );
}

We added the show state to show the alert if it’s true .

And we have a Button to make show true when clicked.

The dismissible on the Alert lets us close the alert.

The onClose prop takes a callback that lets us close the alert by setting the show state to false .

It’ll be run when the close button on the alert is clicked.

This is shown since we added the dismissble prop.

Conclusion

Alerts are boxes that let us show messages triggered by user actions.

We can show whatever we want in them and there’re several varieties of them.