🤩
Windframe Import update is finally here!

Alert

React Bootstrap 5 Alerts

React Bootstrap 5 Alerts keep track of any changes that happen on the website and provide feedbacks messages to users after specific actions are carried out.

With React Bootstrap 5 Alerts we call users attention to certain things as alerts are usually top and center of a webpage, making them a hard to miss, they are really easy to create and even easier with the React Bootstrap 5 library, Contrast.

Importing the Contrast Alert Component

Contrast Alerts are available for any length of text, as well as an optional dismiss button.

To use the Contrast Alerts in your project, we start by importing the CDBAlert component in your project.

js
import { CDBAlert } from "cdbreact";

Default Alerts

We create alerts with the Contrast library by wrapping the content we want to alert our users with the CDBAlert component. To define the background color of our alert, we set the color prop on the CDBAlert component to the color code we want our alert to have (e.g. primary, secondary, success etc.)

js
import React from "react";
import { CDBAlert, CDBContainer } from "cdbreact";
const Alert = () => {
return (
<CDBContainer>
<CDBAlert color="primary">
A straightforward alert with a React Boostrap (contrast)design. Take a look!
</CDBAlert>
<CDBAlert color="secondary">
A straightforward alert with a React Boostrap (contrast)design. Take a look!
</CDBAlert>
<CDBAlert color="success">
A straightforward alert with a React Boostrap (contrast)design. Take a look!
</CDBAlert>
<CDBAlert color="danger">
A straightforward alert with a React Boostrap (contrast)design. Take a look!
</CDBAlert>
<CDBAlert color="warning">
A straightforward alert with a React Boostrap (contrast)design. Take a look!
</CDBAlert>
<CDBAlert color="dark">
A straightforward alert with a React Boostrap (contrast)design. Take a look!
</CDBAlert>
</CDBContainer>
);
};
export default Alert;

Additional Content

Sometimes we want our webpages to pop and add more context to the text or message we want our alert to convey, we can do all of that with the React Bootstrap 5 alerts Contrast gives us.

Our alerts can also contain additional HTML elements like headings, paragraphs and dividers.

js
import React from "react";
import { CDBAlert, CDBContainer } from "cdbreact";
const Alert = () => {
return (
<CDBContainer>
<CDBAlert color="primary">
<h4 class="alert-heading">Well done!</h4>
<p>You did, indeed, read this important alert message. This example text will be a little longer so you can see how spacing within an alert works with this type of content</p>
<hr/>
<p class="mb-0">Use margin utilities whenever possible to keep things neat and tidy</p>
</CDBAlert>
</CDBContainer>
);
};
export default Alert;

Dismissing

Using the Contrast React Alert component, you can dismiss any alert inline by adding the dismiss prop Below is a live action demo.

js
import React from "react";
import { CDBAlert, CDBContainer } from "cdbreact";
const Alert = () => {
return (
<CDBContainer>
<CDBAlert color="danger" dismiss>
<strong>Holy guacamole!</strong> You should check in on some of the fields listed below.
</CDBAlert>
</CDBContainer>
);
};
export default Alert;

Contrast React Bootstrap 5 Alert Props

This section will expand on your knowledge of the props available with the Contrast React Bootstrap 5 Alert component. You'll learn what these props do, what their default values are, and how to use them in your code.

Other prop options for the React Bootstrap 5 Contrast Alert component are listed in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBAlert className="myClass" ... />
colorStringprimarySets color of the alert. Choose one of the following: 'primary,"secondary,"success,' 'danger,' 'warning,' 'info,' 'light,' 'dark'<CDBAlert color="primary" ... />

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast