React Bootstrap — Alerts

Photo by Daniel Roberts on Unsplash

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"…