React Bootstrap 5 Alert Message Example

In this tutorial, we will create alert message using Bootstrap 5 and React. We will create simple alert message react-bootstrap components Alert and useState in react app.

Install & Setup Vite + React + Typescript + Bootstrap 5

Create Alert Message with React Bootstrap 5

1. Create react bootstrap alert message using react-bootstrap components Alert with color variant.

import React from 'react';
import Alert from 'react-bootstrap/Alert';

export default function AlertMessage() {
  return (
    <>
      {[
        'primary',
        'secondary',
        'success',
        'danger',
        'warning',
        'info',
        'light',
        'dark',
      ].map((variant) => (
        <Alert key={variant} variant={variant}>
          This is a {variant} alert—check it out!
        </Alert>
      ))}
    </>
  );
}

create react bootstrap 5 alert message

2. React Bootstrap 5 alert message with some content.

import React from 'react';
import Alert from 'react-bootstrap/Alert';

export default function AlertMessage() {
  return (
    <>
      <Alert variant="success">
        <Alert.Heading>React Bootstrap 5 Alert Message</Alert.Heading>
        <p>
          Aww yeah, you successfully read this important alert message. This
          example text is going to run a bit longer so that you can see how
          spacing within an alert works with this kind of content.
        </p>
        <hr />
        <p className="mb-0">
          Whenever you need to, be sure to use margin utilities to keep things
        </p>
      </Alert>
    </>
  );
}

react bootstrap 5 alert message content

3. React Bootstrap 5 alert message close with Dismissing and using useState Hook.

import React, { useState } from 'react';
import Alert from 'react-bootstrap/Alert';
import Button from 'react-bootstrap/Button';

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

  if (show) {
    return (
      <div className="col-md-4 container mt-5">
        <Alert variant="danger" onClose={() => setShow(false)} dismissible>
          <Alert.Heading>React Bootstrap 5 alert message close onClick!</Alert.Heading>
          <p>
            Change this and that and try again. Duis mollis, est non commodo
            luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
            Cras mattis consectetur purus sit amet fermentum.
          </p>
        </Alert>
      </div>
    );
  }
  return <Button onClick={() => setShow(true)}>Show Alert</Button>;
}

react bootstrap 5 show alert message on click button