Alerts in React-Bootstrap - GeeksforGeeks

16 Feb, 2021
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: 
 
Picked
React-Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to redirect to another page in ReactJS ?
Difference Between PUT and PATCH Request
How to execute PHP code using command line ?
How to pass data from child component to its parent in ReactJS ?
How to Insert Form Data into Database using PHP ?