Overview
Metronic customizes the
Bootstrap Alerts through creative use of Bootstrap utilities and with handpicked icons.
Basic Example
Use
.alertwith
.alert-{color}classes to set the alert's style defined with
$theme-colorsmapped in
src/sass/components/_variables.scss:This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an 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">
<!--begin::Icon-->
<span class="svg-icon svg-icon-2hx svg-icon-primary me-3">...</span>
<!--end::Icon-->
<!--begin::Wrapper-->
<div class="d-flex flex-column">
<!--begin::Title-->
<h4 class="mb-1 text-dark">This is an alert</h4>
<!--end::Title-->
<!--begin::Content-->
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
<!--end::Content-->
</div>
<!--end::Wrapper-->
</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 an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
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-primary d-flex flex-column flex-sm-row p-5 mb-10">
<!--begin::Icon-->
<span class="svg-icon svg-icon-2hx svg-icon-light me-4 mb-5 mb-sm-0">...</span>
<!--end::Icon-->
<!--begin::Wrapper-->
<div class="d-flex flex-column text-light pe-0 pe-sm-10">
<!--begin::Title-->
<h4 class="mb-2 light">This is an alert</h4>
<!--end::Title-->
<!--begin::Content-->
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
<!--end::Content-->
</div>
<!--end::Wrapper-->
<!--begin::Close-->
<button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
<span class="svg-icon svg-icon-2x svg-icon-light">...</span>
</button>
<!--end::Close-->
</div>
<!--end::Alert-->
Light Colors
Use
.alertwith
.bg-light-{color}classes to set the alert's style with a light 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 an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
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-light-primary d-flex flex-column flex-sm-row p-5 mb-10">
<!--begin::Icon-->
<span class="svg-icon svg-icon-2hx svg-icon-primary me-4 mb-5 mb-sm-0">...</span>
<!--end::Icon-->
<!--begin::Wrapper-->
<div class="d-flex flex-column pe-0 pe-sm-10">
<!--begin::Title-->
<h4 class="fw-bold">This is an alert</h4>
<!--end::Title-->
<!--begin::Content-->
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
<!--end::Content-->
</div>
<!--end::Wrapper-->
<!--begin::Close-->
<button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
<span class="svg-icon svg-icon-1 svg-icon-primary">...</span>
</button>
<!--end::Close-->
</div>
<!--end::Alert-->
Border Examples
Use
.alertwith
.bg-light-{color}and
.borderclasses to set the alert's style with borders. Please refer to our
Theme colorsand
Bordersfor 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 an alert with a basic border
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert with a dashed border
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert with a thick border
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert with a thick dashed border
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-light-primary border border-primary d-flex flex-column flex-sm-row p-5 mb-10">
<!--begin::Icon-->
<span class="svg-icon svg-icon-2hx svg-icon-primary me-4 mb-5 mb-sm-0">...</span>
<!--end::Icon-->
<!--begin::Wrapper-->
<div class="d-flex flex-column pe-0 pe-sm-10">
<!--begin::Title-->
<h5 class="mb-1">This is an alert</h5>
<!--end::Title-->
<!--begin::Content-->
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
<!--end::Content-->
</div>
<!--end::Wrapper-->
<!--begin::Close-->
<button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
<i class="bi bi-x fs-1 text-primary"></i>
</button>
<!--end::Close-->
</div>
<!--end::Alert-->
Rich Content Example
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 Conditionsfor more info.
Please read our Terms and Conditionsfor more info.
<!--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">
<!--begin::Close-->
<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>
<!--end::Close-->
<!--begin::Icon-->
<span class="svg-icon svg-icon-5tx svg-icon-danger mb-5">...</span>
<!--end::Icon-->
<!--begin::Wrapper-->
<div class="text-center">
<!--begin::Title-->
<h1 class="fw-bolder mb-5">This is an alert</h1>
<!--end::Title-->
<!--begin::Separator-->
<div class="separator separator-dashed border-danger opacity-25 mb-5"></div>
<!--end::Separator-->
<!--begin::Content-->
<div class="mb-9 text-dark">
The alert component can be used to highlight certain parts of your page for <strong>higher content visibility</strong>.<br/>
Please read our <a href="#" class="fw-bolder me-1">Terms and Conditions</a> for more info.
</div>
<!--end::Content-->
<!--begin::Buttons-->
<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>
<!--end::Buttons-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Alert-->
2022©
Keenthemes
