Reactstrap is a version Bootstrap made for React.
It’s a set of React components that have Boostrap styles.
In this article, we’ll look at how to get started with Reactstrap and display alerts.
We can install Reactstrap by running:
npm install --save reactstrap
Then we can import the components we need.
We also need to install Bootstrap since the Bootstrap CSS isn’t included.
So we can write:
npm install --save bootstrap
Then we can import it by writing:
import 'bootstrap/dist/css/bootstrap.min.css';
We can add alerts with the Alert
component.
For instance, we can write:
import React from "react";
import { Alert } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<div className="App">
<Alert color="primary">
<a href="#" className="alert-link">
link
</a>{" "}
message
</Alert>
<Alert color="secondary">
<a href="#" className="alert-link">
link
</a>{" "}
message
</Alert>
<Alert color="success">
<a href="#" className="alert-link">
link
</a>{" "}
message
</Alert>
<Alert color="danger">
<a href="#" className="alert-link">
link
</a>{" "}
message
</Alert>
<Alert color="warning">
<a href="#" className="alert-link">
link
</a>{" "}
message
</Alert>
<Alert color="info">
<a href="#" className="alert-link">
link
</a>{" "}
message
</Alert>
<Alert color="light">
<a href="#" className="alert-link">
link
</a>{" "}
message
</Alert>
<Alert color="dark">
<a href="#" className="alert-link">
link
</a>{" "}
message
</Alert>
</div>
);
}
We have the Alert
component with the color
prop to set the color.
className
has the color for the link.
#technology #web-development #software-development #javascript #programming