New Contrast Pro UI Kit and template with 5 admin dashboards, 23 pages and 10000+ components for $49 ($50 off)🎉

Alert

ad-banner

Alert

Contrast Bootstrap Alert can be used to provide feedback messages to users after specific actions are carried out.

Examples

Contrast Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the contextual props (e.g., color="success"). For inline dismissal, use the dismiss prop.

image info

html
<div
class="alert alert-primary"
style="width: fit-content"
role="alert"
>
A simple alert built with contrast design check it out!
</div>
<div
class="alert alert-secondary"
style="width: fit-content"
role="alert"
>
A simple alert built with contrast design check it out!
</div>
<div
class="alert alert-success"
style="width: fit-content"
role="alert"
>
A simple alert built with contrast design check it out!
</div>
<div
class="alert alert-danger"
style="width: fit-content"
role="alert"
>
A simple alert built with contrast design check it out!
</div>
<div
class="alert alert-warning"
style="width: fit-content"
role="alert"
>
A simple alert built with contrast design check it out!
</div>
<div class="alert alert-info" style="width: fit-content" role="alert">
A simple alert built with contrast design check it out!
</div>
<div class="alert alert-dark" style="width: fit-content" role="alert">
A simple alert built with contrast design check it out!
</div>

Dismissable Alert Button

image info

HTML
<div
class="alert alert-warning alert-dismissible fade show"
role="alert"
>
<strong>Holy guacamole!</strong> You should check in on some of
those fields below.
<button
type="button"
class="btn-close"
data-dismiss="alert"
aria-label="Close"
></button>
</div>

Dismissable Alert Button with Javascript

image info

HTML
<div
class="alert alert-warning alert-dismissible fade show"
id="alert1"
role="alert"
>
Hey Dismiss me using Javascript
</div>
<button id="dismiss1" class="btn btn-dark btn-flat mt-4">
Dismiss Alert
</button>
</div>
Script
<script>
document.querySelector('#dismiss1').addEventListener('click', () => {
var alertNode = document.querySelector('#alert1');
var alert = new bootstrap.Alert(alertNode);
alert.close();
});
</script>

Create Stunning websites and web apps

Building different custom components in react for your web apps or websites can get very stressful. Thats why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro.Try contrast pro

ad-banner

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components.Learn more about Contrast Pro