React-Bootstrap Alerts Component

Introduction: React-Bootstrap is a front-end framework that was designed keeping react in mind. Bootstrap was re-built and revamped for React, hence it is known as React-Bootstrap. Alerts are used to pop notifications on the screen. Depending upon the scenario the nature and theme of the alerts change.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required modules using the following command:

npm install react-bootstrap bootstrap

Project Structure: It will look like the following.

Project Structure

App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript

import react from "react";
import Alert from "react-bootstrap/Alert";

const App = () => {
  return (
    <div>
      <Alert variant="success" style={{ width: "42rem" }}>
        <Alert.Heading>
          This is a success alert which has green background
        </Alert.Heading>
      </Alert>

      <Alert variant="secondary" style={{ width: "42rem" }}>
        <Alert.Heading>
          This is a secondary alert which has grey background
        </Alert.Heading>
      </Alert>

      <Alert variant="primary" style={{ width: "42rem" }}>
        <Alert.Heading>
          This is a primary alert which has blue background
        </Alert.Heading>
      </Alert>

      <Alert variant="danger" style={{ width: "42rem" }}>
        <Alert.Heading>
          This is a danger alert which has red background
        </Alert.Heading>
      </Alert>

      <Alert variant="warning" style={{ width: "42rem" }}>
        <Alert.Heading>
          This is a warning alert which has yellow background
        </Alert.Heading>
      </Alert>

      <Alert variant="light" style={{ width: "42rem" }}>
        <Alert.Heading>
          This is a light alert which has white background
        </Alert.Heading>
      </Alert>

      <Alert variant="dark" style={{ width: "42rem" }}>
        <Alert.Heading>
          This is a dark alert which has dark grey background
        </Alert.Heading>
      </Alert>

      <Alert variant="info" style={{ width: "42rem" }}>
        <Alert.Heading>
          This is a info alert which has light blue background
        </Alert.Heading>
      </Alert>
    </div>
  );
};

export default App;

Run the server using the following command:

npm start

Output: