Craft customizes the Bootstrap Alerts
through creative use of Bootstrap utilities and with handpicked icons.
Basic
Use .alert with .alert-{color} classes to set the alert's style
defined with $theme-colors mapped 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--><divclass="alert alert-primary d-flex align-items-center p-5"><!--begin::Icon--><iclass="ki-duotone ki-shield-tick fs-2hx text-success me-4"><spanclass="path1"></span><spanclass="path2"></span></i><!--end::Icon--><!--begin::Wrapper--><divclass="d-flex flex-column"><!--begin::Title--><h4class="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 .alert with .bg-{color} classes to set the alert's style with a solid color.
Please refer to our Theme colors for more info.
Add the class .alert-dismissible to the parent .alert wrapper 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--><divclass="alert alert-dismissible bg-primary d-flex flex-column flex-sm-row p-5 mb-10"><!--begin::Icon--><iclass="ki-duotone ki-search-list fs-2hx text-light me-4 mb-5 mb-sm-0"><spanclass="path1"></span><spanclass="path2"></span><spanclass="path3"></span></i><!--end::Icon--><!--begin::Wrapper--><divclass="d-flex flex-column text-light pe-0 pe-sm-10"><!--begin::Title--><h4class="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--><buttontype="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"><iclass="ki-duotone ki-cross fs-1 text-light"><spanclass="path1"></span><spanclass="path2"></span></i></button><!--end::Close--></div><!--end::Alert-->
Light Colors
Use .alert with .bg-light-{color} classes to set the alert's style with a light color. Please refer to our Theme colors for more info.
Add the class .alert-dismissible to the parent .alert wrapper 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--><divclass="alert alert-dismissible bg-light-primary d-flex flex-column flex-sm-row p-5 mb-10"><!--begin::Icon--><iclass="ki-duotone ki-notification-bing fs-2hx text-primary me-4 mb-5 mb-sm-0"><spanclass="path1"></span><spanclass="path2"></span><spanclass="path3"></span></i><!--end::Icon--><!--begin::Wrapper--><divclass="d-flex flex-column pe-0 pe-sm-10"><!--begin::Title--><h4class="fw-semibold">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--><buttontype="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"><iclass="ki-duotone ki-cross fs-1 text-primary"><spanclass="path1"></span><spanclass="path2"></span></i></button><!--end::Close--></div><!--end::Alert-->
Border Options
Use .alert with .bg-light-{color} and .border classes to set the alert's style with borders.
Please refer to our Theme colors and
Borders for more info.
Add the class .alert-dismissible to the parent .alert wrapper 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--><divclass="alert alert-dismissible bg-light-primary border border-primary d-flex flex-column flex-sm-row p-5 mb-10"><!--begin::Icon--><iclass="ki-duotone ki-search-list fs-2hx text-success me-4 mb-5 mb-sm-0"><spanclass="path1"></span><spanclass="path2"></span><spanclass="path3"></span></i><!--end::Icon--><!--begin::Wrapper--><divclass="d-flex flex-column pe-0 pe-sm-10"><!--begin::Title--><h5class="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--><buttontype="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"><iclass="ki-duotone ki-cross fs-1 text-success"><spanclass="path1"></span><spanclass="path2"></span></i></button><!--end::Close--></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.
<!--begin::Alert--><divclass="alert alert-dismissible bg-light-danger d-flex flex-center flex-column py-10 px-10 px-lg-20 mb-10"><!--begin::Close--><buttontype="button"class="position-absolute top-0 end-0 m-2 btn btn-icon btn-icon-danger"data-bs-dismiss="alert"><iclass="ki-duotone ki-cross fs-1"><spanclass="path1"></span><spanclass="path2"></span></i></button><!--end::Close--><!--begin::Icon--><iclass="ki-duotone ki-information-5 fs-5tx text-danger mb-5"><spanclass="path1"></span><spanclass="path2"></span><spanclass="path3"></span></i><!--end::Icon--><!--begin::Wrapper--><divclass="text-center"><!--begin::Title--><h1class="fw-bold mb-5">This is an alert</h1><!--end::Title--><!--begin::Separator--><divclass="separator separator-dashed border-danger opacity-25 mb-5"></div><!--end::Separator--><!--begin::Content--><divclass="mb-9 text-gray-900">
The alert component can be used to highlight certain parts of your page for <strong>higher content visibility</strong>.<br/>
Please read our <ahref="#"class="fw-bold me-1">Terms and Conditions</a> for more info.
</div><!--end::Content--><!--begin::Buttons--><divclass="d-flex flex-center flex-wrap"><ahref="#"class="btn btn-outline btn-outline-danger btn-active-danger m-2">Cancel</a><ahref="#"class="btn btn-danger m-2">Ok, I got it</a></div><!--end::Buttons--></div><!--end::Wrapper--></div><!--end::Alert-->