Alerts

Overview

Metronic customizes the Bootstrap Alerts through creative use of Bootstrap utilities and with handpicked icons.

Basic

Use .alertwith .alert-{color}classes to set the alert's style.

This is a primary alert

The alert component can be used to highlight certain parts of your page for higher content visibility.

This is a success alert

The alert component can be used to highlight certain parts of your page for higher content visibility.

This is a warning alert

The alert component can be used to highlight certain parts of your page for higher content visibility.

This is a danger alert

The alert component can be used to highlight certain parts of your page for higher content visibility.


<!--begin::Alert-->
<div class="alert alert-primary d-flex align-items-center p-5 col-8">
<span class="me-5"><i class="far fa-check-circle fs-2x text-primary"></i></span>
<div class="d-flex flex-column">
<h4 class="text-dark">This is a primary alert</h4>
<span class="text-dark">The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!--end::Alert-->

Solid Colors

Use .alertwith .bg-{color}classes to set the alert's style with a solid color. Please refer to our Theme colorsfor more info.

Add the class .alert-dismissibleto the parent .alertwrapper and data-bs-dismiss="alert"to the close button to allow dismissing alerts. Please take note of the HTML markup sample below for all required responsive classes.

This is a secondary alert

The alert component can be used to highlight certain parts of your page for higher content visibility.

This is a success alert

The alert component can be used to highlight certain parts of your page for higher content visibility.

This is a warning alert

The alert component can be used to highlight certain parts of your page for higher content visibility.

This is a danger lert

The alert component can be used to highlight certain parts of your page for higher content visibility.

<!--begin::Alert-->
<div class="alert alert-dismissible bg-secondary d-flex flex-column flex-sm-row col-8 p-5">
<span class="me-5"><i class="far fa-check-circle fs-2x text-white"></i></span>
<div class="d-flex flex-column text-light pe-0 pe-sm-10">
<h4 class="text-white">This is a secondary alert</h4>
<span class="text-white">The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
<button type="button" class="btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
<span><i class="fas fa-times fs-2x text-white"></i></span>
</button>
</div>
<!--end::Alert-->

Rich Content

Here's a sample of an alert with rich content elements inside it. Please take note of the HTML markup sample below for all required classes.

This is an alert

The alert component can be used to highlight certain parts of your page for higher content visibility.
Please read our Terms and Conditions for more info.

Cancel Ok, I got it

<!--begin::Alert-->
<div class="alert alert-dismissible bg-light-danger d-flex flex-center flex-column py-10 px-10 px-lg-20 mb-10">
<button type="button" class="position-absolute top-0 end-0 m-2 btn btn-icon btn-icon-danger" data-bs-dismiss="alert">
<span class="svg-icon svg-icon-1">...</span>
</button>
<span class="mb-5"><i class="far fa-trash-alt fs-3x text-danger"></i></span>
<div class="text-center">
<h2 class="fw-bold mb-5">This is an alert</h2>
<div class="separator border-danger opacity-50 mb-5"></div>
<div class="mb-9 text-dark">
The alert component can be used to highlight certain parts of your page for higher content visibility.<br>
Please read our Terms and Conditions for more info.
</div>
<div class="d-flex flex-center flex-wrap">
<a href="#" class="btn btn-outline btn-outline-danger btn-active-danger m-2">Cancel</a>
<a href="#" class="btn btn-danger m-2">Ok, I got it</a>
</div>
</div>
</div>
<!--end::Alert-->