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:
Last Updated :
21 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...