# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Metronic 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-->
    <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 `.alert`with `.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-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-->
    <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 `.alert`with `.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-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-->
    <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 Options

Use `.alert`with `.bg-light-{color}`and `.border`classes to set the alert's style with borders. Please refer to our Theme colorsand Bordersfor 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-->
    <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

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.
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">
        <!--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-->

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now