Alerts | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Alerts

#### Default Alerts

Show Code

Use the `alert` class to show a default alert.

###### Primary Alert

Hi! A simple Primary alert —check it out!

###### Secondary Alert

How are you! A simple secondary alert —check it out!

###### Success Alert

Yey! Everything worked! A simple success alert —check it out!

###### Danger Alert

Something is very wrong! A simple danger alert —check it out!

###### Warning Alert

Uh oh, something went wrong A simple warning alert —check it out!

###### Info Alert

Don't forget' it ! A simple info alert —check it out!

###### Light Alert

Mind Your Step! A simple light alert —check it out!

###### Dark Alert

Did you know? A simple dark alert —check it out!

    <!-- Primary Alert -->
    <div class="alert alert-primary" role="alert">
        <strong> Hi! </strong> A simple <b>Primary alert</b> —check it out!
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary" role="alert">
        <strong> How are you! </strong> A simple <b>secondary alert</b> —check it out!
    </div>

    <!-- success Alert -->
    <div class="alert alert-success" role="alert">
        <strong> Yey! Everything worked! </strong> A simple <b>success alert</b> —check it out!
    </div>

    <!-- danger Alert -->
    <div class="alert alert-danger" role="alert">
        <strong> Something is very wrong! </strong> A simple <b>danger alert</b> —check it out!
    </div>

    <!-- warning Alert -->
    <div class="alert alert-warning" role="alert">
        <strong> Uh oh, something went wrong </strong> A simple <b>warning alert</b> —check it out!
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info" role="alert">
        <strong> Don't forget' it ! </strong> A simple <b>info alert</b> —check it out!
    </div>

    <!-- Light Alert -->
    <div class="alert alert-light" role="alert">
        <strong> Mind Your Step! </strong> A simple <b>light alert</b> —check it out!
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark" role="alert">
        <strong> Did you know? </strong> A simple <b>dark alert</b> —check it out!
    </div>

#### Borderless Alerts

Show Code

Use the `border-0` class to set alert without border.

###### Primary Alert

Hi! A simple Primary alert —check it out!

###### Secondary Alert

How are you! A simple secondary alert —check it out!

###### Success Alert

Yey! Everything worked! A simple success alert —check it out!

###### Danger Alert

Something is very wrong! A simple danger alert—check it out!

###### Warning Alert

Uh oh, something went wrong A simple warning alert —check it out!

###### Info Alert

Don't forget' it ! A simple info alert —check it out!

###### Light Alert

Mind Your Step! A simple light alert —check it out!

###### Dark Alert

Did you know? A simple dark alert —check it out!

    <!-- Primary Alert -->
    <div class="alert border-0 alert-primary" role="alert">
        <strong> Hi! </strong> A simple <b>Primary alert</b> —check it out!
    </div>

    <!-- Secondary Alert -->
    <div class="alert border-0 alert-secondary" role="alert">
        <strong> How are you! </strong> A simple <b>secondary alert</b> —check it out!
    </div>

    <!-- Success Alert -->
    <div class="alert border-0 alert-success" role="alert">
        <strong> Yey! Everything worked! </strong> A simple <b>success alert</b> —check it out!
    </div>

    <!-- Danger Alert -->
    <div class="alert border-0 alert-danger" role="alert">
        <strong> Something is very wrong! </strong> A simple <b>danger alert</b> —check it out!
    </div>

    <!-- Warning Alert -->
    <div class="alert border-0 alert-warning" role="alert">
        <strong> Uh oh, something went wrong </strong> A simple <b>warning alert</b> —check it out!
    </div>

    <!-- Info Alert -->
    <div class="alert border-0 alert-info" role="alert">
        <strong> Don't forget' it ! </strong> A simple <b>info alert</b> —check it out!
    </div>

    <!-- Light Alert -->
    <div class="alert border-0 alert-light" role="alert">
        <strong> Mind Your Step! </strong> A simple <b>light alert</b> —check it out!
    </div>

    <!-- Dark Alert -->
    <div class="alert border-0 alert-dark mb-0" role="alert">
        <strong> Did you know? </strong> A simple <b>dark alert</b> —check it out!
    </div>

#### Dismissing Alerts

Show Code

Use the `alert-dismissible` class to add dismissing button to the alert.

###### Primary Alert

Hi! A simple Dismissible primary Alert — check it out!

###### Secondary Alert

How are you! A simple Dismissible secondary alert —check it out!

###### Success Alert

Right Way ! A simple Dismissible success alert —check it out!

###### Danger Alert

Something is very wrong! A simple Dismissible danger alert —check it out!

###### Warning Alert

Welcome Back! A simple Dismissible warning alert —check it out!

###### Info Alert

Don't forget' it ! A simple Dismissible info alert —check it out!

###### Light Alert

Mind Your Step! A simple Dismissible light alert —check it out!

###### Dark Alert

Did you know? A simple Dismissible dark alert —check it out!

    <!-- Primary Alert -->
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        <strong> Hi! </strong> A simple <b>Dismissible primary Alert </b> — check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary alert-dismissible fade show" role="alert">
        <strong> How are you! </strong> A simple <b>Dismissible secondary Alert </b> — check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Success Alert -->
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong> Yey! Everything worked! </strong> A simple <b>Dismissible success Alert </b> — check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Danger Alert -->
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong> Something is very wrong! </strong> A simple <b>Dismissible danger Alert </b> — check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong> Welcome Back! </strong> A simple <b>Dismissible warning Alert </b> — check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <strong> Don't forget' it ! </strong> A simple <b>Dismissible info Alert </b> — check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Light Alert -->
    <div class="alert alert-light alert-dismissible fade show" role="alert">
        <strong> Mind Your Step! </strong> A simple <b>Dismissible light Alert </b> — check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark alert-dismissible fade show" role="alert">
        <strong> Did you know? </strong> A simple <b>Dismissible dark Alert </b> — check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

#### Link Color Alerts

Show Code

Use the `alert-link` class at <a> tag to show matching colored links within the given alert.

###### Primary Alert

A simple Primary alert with an example link. Give it a click if you like.

###### Secondary Alert

A simple Secondary alert with an example link. Give it a click if you like.

###### Success Alert

A simple Success alert with an example link. Give it a click if you like.

###### Danger Alert

A simple Danger alert with an example link. Give it a click if you like.

###### Warning Alert

A simple Warning alert with an example link. Give it a click if you like.

###### Info Alert

A simple Info alert with an example link. Give it a click if you like.

###### Light Alert

A simple Light alert with an example link. Give it a click if you like.

###### Dark Alert

A simple Dark alert with an example link. Give it a click if you like.

    <!-- Primary Alert -->
    <div class="alert alert-primary" role="alert">
        A simple <b>Primary alert</b> with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary" role="alert">
        A simple <b>Secondary alert</b> with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>

    <!-- Success Alert -->
    <div class="alert alert-success" role="alert">
        A simple <b>Success alert</b> with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>

    <!-- Danger Alert -->
    <div class="alert alert-danger" role="alert">
        A simple <b>Danger alert</b> with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning" role="alert">
        A simple <b>Warning alert</b> with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info" role="alert">
        A simple <b>Info alert</b> with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>

    <!-- Light Alert -->
    <div class="alert alert-light" role="alert">
        A simple <b>Light alert</b> with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark" role="alert">
        A simple <b>Dark alert</b> with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>

#### Live Alert Example

Show Code

Click the Show live alert button to show an alert on button click.

    <div id="liveAlertPlaceholder"></div>
    <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

#### Outline Alerts

Show Code

Use the `border-2 bg-body-secondary` class to set an alert with outline.

###### Primary Outline Alert

Hi! - Outline primary alert example

###### Secondary Outline Alert

How are you! - Outline secondary alert example

###### Success Outline Alert

Yey! Everything worked! - Outline success alert example

###### Danger Outline Alert

Something is very wrong! - Outline danger alert example

###### Warning Outline Alert

Uh oh, something went wrong! - Outline warning alert example

###### Info Outline Alert

Don't forget' it ! - Outline info alert example

###### Dark Alert

Did you know? - Outline dark alert example

    <!-- Primary Alert -->
    <div class="alert alert-primary alert-dismissible border-2 bg-body-secondary fade show" role="alert">
        <strong> Hi! </strong> - Outline <b>primary alert</b> example
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary alert-dismissible border-2 bg-body-secondary fade show" role="alert">
        <strong> How are you! </strong> - Outline <b>secondary alert</b> example
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Success Alert -->
    <div class="alert alert-success alert-dismissible border-2 bg-body-secondary fade show" role="alert">
        <strong> Yey! Everything worked! </strong> - Outline <b>success alert</b> example
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Danger Alert -->
    <div class="alert alert-danger alert-dismissible border-2 bg-body-secondary fade show" role="alert">
        <strong> Something is very wrong! </strong> - Outline <b>danger alert</b> example
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-dismissible border-2 bg-body-secondary fade show" role="alert">
        <strong> Uh oh, something went wrong! </strong> - Outline <b>warning alert</b> example
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-dismissible border-2 bg-body-secondary fade show" role="alert">
        <strong> Don't forget' it ! </strong> - Outline <b>info alert</b> example
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark alert-dismissible border-2 bg-body-secondary fade show" role="alert">
        <strong> Did you know? </strong> - Outline <b>dark alert</b> example
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

#### Left Border Alerts

Show Code

Use the `alert-border-left` class to set an alert with the left border & outline.

###### Primary Alert

Primary - Left border alert

###### Secondary Alert

Secondary - Left border alert

###### Success Alert

Success - Left border alert

###### Danger Alert

Danger - Left border alert

###### Warning Alert

Warning - Left border alert

###### Info Alert

Info - Left border alert

###### Light Alert

Light - Left border alert

###### Dark Alert

Dark - Left border alert

    <!-- Primary Alert -->
    <div class="alert alert-primary alert-border-left alert-dismissible fade show" role="alert">
        <i class="ri-user-smile-line me-3 align-middle"></i> <strong>Primary</strong> - Left border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary alert-border-left alert-dismissible fade show" role="alert">
        <i class="ri-check-double-line me-3 align-middle"></i> <strong>Secondary</strong> - Left border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Success Alert -->
    <div class="alert alert-success alert-border-left alert-dismissible fade show" role="alert">
        <i class="ri-notification-off-line me-3 align-middle"></i> <strong>Success</strong> - Left border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Danger Alert -->
    <div class="alert alert-danger alert-border-left alert-dismissible fade show" role="alert">
        <i class="ri-error-warning-line me-3 align-middle"></i> <strong>Danger</strong> - Left border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-border-left alert-dismissible fade show" role="alert">
        <i class="ri-alert-line me-3 align-middle"></i> <strong>Warning</strong> - Left border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-border-left alert-dismissible fade show" role="alert">
        <i class="ri-airplay-line me-3 align-middle"></i> <strong>Info</strong> - Left border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Light Alert -->
        <div class="alert alert-light alert-border-left alert-dismissible fade show" role="alert">
            <i class="ri-mail-line me-3 align-middle"></i> <strong>Light</strong> - Left border alert
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark alert-border-left alert-dismissible fade show" role="alert">
        <i class="ri-refresh-line me-3 align-middle"></i> <strong>Dark</strong> - Left border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

#### Label Icon Alerts

Show Code

Use the `alert-label-icon` class to set an alert with a label icon.

###### Primary Alert

Primary - Label icon alert

###### Secondary Alert

Secondary - Label icon alert

###### Success Alert

Success - Label icon alert

###### Danger Alert

Danger - Label icon alert

###### Warning Alert

warning - Label icon alert

###### Info Alert

Info - Label icon alert

###### Light Alert

Light - Label icon alert

###### Dark Alert

Dark - Label icon alert

    <!-- Primary Alert -->
    <div class="alert alert-primary alert-dismissible bg-primary text-white alert-label-icon fade show" role="alert">
        <i class="ri-user-smile-line label-icon"></i><strong>Primary</strong> - Label icon alert
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary alert-dismissible bg-secondary text-white alert-label-icon fade show" role="alert">
        <i class="ri-check-double-line label-icon"></i><strong>Secondary</strong> - Label icon alert
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Success Alert -->
    <div class="alert alert-success alert-dismissible bg-success text-white alert-label-icon fade show" role="alert">
        <i class="ri-notification-off-line label-icon"></i><strong>Success</strong> - Label icon alert
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Danger Alert -->
    <div class="alert alert-danger alert-dismissible bg-danger text-white alert-label-icon fade show" role="alert">
        <i class="ri-error-warning-line label-icon"></i><strong>Danger</strong> - Label icon alert
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-dismissible bg-warning text-white alert-label-icon fade show" role="alert">
        <i class="ri-alert-line label-icon"></i><strong>Warning</strong> - Label icon alert
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-dismissible bg-info text-white alert-label-icon fade show" role="alert">
        <i class="ri-airplay-line label-icon"></i><strong>Info</strong> - Label icon alert
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Light Alert -->
    <div class="alert alert-light alert-dismissible bg-light text-body alert-label-icon fade show" role="alert">
        <i class="ri-mail-line label-icon"></i><strong>Light</strong> - Label icon alert
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark alert-dismissible bg-dark text-white alert-label-icon fade show mb-0" role="alert">
        <i class="ri-refresh-line label-icon"></i><strong>Dark</strong> - Label icon alert
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

#### Additional Content Alerts

Show Code

Use the `alert-additional` class and Use the `alert-` class to HTML elements like headings, paragraphs, dividers etc.

###### Primary Alert

##### Well done !

Aww yeah, you successfully read this important alert message.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

###### Danger Alert

##### Something is very wrong!

Change a few things up and try submitting again.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

###### Success Alert

##### Yey! Everything worked!

This alert needs your attention, but it's not super important.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

###### Warning Alert

##### Uh oh, something went wrong!

Better check yourself, you're not looking too good.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

    <!-- Primary Alert -->
    <div class="alert alert-primary alert-dismissible alert-additional fade show" role="alert">
        <div class="alert-body">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <div class="d-flex">
                <div class="flex-shrink-0 me-3">
                    <i class="ri-user-smile-line fs-16 align-middle"></i>
                </div>
                <div class="flex-grow-1">
                    <h5 class="alert-heading">Well done !</h5>
                    <p class="mb-0">Aww yeah, you successfully read this important alert message. </p>
                </div>
            </div>
        </div>
        <div class="alert-content">
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </div>
    </div>

    <!-- Danger Alert -->
    <div class="alert alert-danger alert-dismissible alert-additional fade show" role="alert">
        <div class="alert-body">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <div class="d-flex">
                <div class="flex-shrink-0 me-3">
                    <i class="ri-error-warning-line fs-16 align-middle"></i>
                </div>
                <div class="flex-grow-1">
                    <h5 class="alert-heading">Something is very wrong!</h5>
                    <p class="mb-0">Change a few things up and try submitting again. </p>
                </div>
            </div>
        </div>
        <div class="alert-content">
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </div>
    </div>

    <!-- Success Alert -->
    <div class="alert alert-success alert-dismissible alert-additional fade show" role="alert">
        <div class="alert-body">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <div class="d-flex">
                <div class="flex-shrink-0 me-3">
                    <i class="ri-notification-off-line fs-16 align-middle"></i>
                </div>
                <div class="flex-grow-1">
                    <h5 class="alert-heading">Yey! Everything worked!</h5>
                    <p class="mb-0">This alert needs your attention, but it's not super important. </p>
                </div>
            </div>
        </div>
        <div class="alert-content">
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </div>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-dismissible alert-additional fade show mb-0" role="alert">
        <div class="alert-body">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <div class="d-flex">
                <div class="flex-shrink-0 me-3">
                    <i class="ri-alert-line fs-16 align-middle"></i>
                </div>
                <div class="flex-grow-1">
                    <h5 class="alert-heading">Uh oh, something went wrong!</h5>
                    <p class="mb-0">Better check yourself, you're not looking too good. </p>
                </div>
            </div>
        </div>
        <div class="alert-content">
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </div>
    </div>

#### Top Border with Outline Alerts

Show Code

Use the `alert-top-border` class to set an alert with the top border and outline.

###### Primary Alert

Primary - Top border alert

###### Secondary Alert

Secondary - Top border alert

###### Success Alert

Success - Top border alert

###### Danger Alert

Danger - Top border alert

###### Warning Alert

Warning - Top border alert

###### Info Alert

Info - Top border alert

###### Light Alert

Light - Top border alert

###### Dark Alert

Dark - Top border alert

    <!-- Primary Alert -->
    <div class="alert alert-primary alert-top-border alert-dismissible fade show" role="alert">
        <i class="ri-user-smile-line me-3 align-middle fs-16 text-primary"></i><strong>Primary</strong> - Top border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary alert-top-border alert-dismissible fade show" role="alert">
        <i class="ri-check-double-line me-3 align-middle fs-16 text-secondary"></i><strong>Secondary</strong> - Top border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Success Alert -->
    <div class="alert alert-success alert-top-border alert-dismissible fade show" role="alert">
        <i class="ri-notification-off-line me-3 align-middle fs-16 text-success"></i><strong>Success</strong> - Top border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Danger Alert -->
    <div class="alert alert-danger alert-top-border alert-dismissible fade show" role="alert">
        <i class="ri-error-warning-line me-3 align-middle fs-16 text-danger"></i><strong>Danger</strong> - Top border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-top-border alert-dismissible fade show" role="alert">
        <i class="ri-alert-line me-3 align-middle fs-16 text-warning"></i><strong>Warning</strong> - Top border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-top-border alert-dismissible fade show" role="alert">
        <i class="ri-airplay-line me-3 align-middle fs-16 text-info"></i><strong>Info</strong> - Top border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Light Alert -->
    <div class="alert alert-light alert-top-border alert-dismissible fade show" role="alert">
        <i class="ri-mail-line me-3 align-middle fs-16 text-light"></i><strong>Light</strong> - Top border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark alert-top-border alert-dismissible fade show mb-0" role="alert">
        <i class="ri-refresh-line me-3 align-middle fs-16 text-body"></i><strong>Dark</strong> - Top border alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

#### Label Icon Arrow Alerts

Show Code

Use the `alert-label-icon label-arrow` class to show an alert with label icon and arrow.

###### Primary Alert

Primary - Label icon arrow alert

###### Secondary Alert

Secondary - Label icon arrow alert

###### Success Alert

Success - Label icon arrow alert

###### Danger Alert

Danger - Label icon arrow alert

###### Warning Alert

Warning - Label icon arrow alert

###### info Alert

Info - Label icon arrow alert

###### Light Alert

Light - Label icon arrow alert

###### Dark Alert

Dark - Label icon arrow alert

    <!-- Primary Alert -->
    <div class="alert alert-primary alert-dismissible alert-label-icon label-arrow fade show" role="alert">
        <i class="ri-user-smile-line label-icon"></i><strong>Primary</strong> - Label icon arrow  alert
        <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button>
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary alert-dismissible alert-label-icon label-arrow fade show" role="alert">
        <i class="ri-check-double-line label-icon"></i><strong>Secondary</strong> - Label icon arrow  alert
        <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button>
    </div>

    <!-- Success Alert -->
    <div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show" role="alert">
        <i class="ri-notification-off-line label-icon"></i><strong>Success</strong> - Label icon arrow  alert
        <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button>
    </div>

    <!-- Danger Alert -->
    <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show" role="alert">
        <i class="ri-error-warning-line label-icon"></i><strong>Danger</strong> - Label icon arrow  alert
        <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-dismissible alert-label-icon label-arrow fade show" role="alert">
        <i class="ri-alert-line label-icon"></i><strong>Warning</strong> - Label icon arrow  alert
        <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-dismissible alert-label-icon label-arrow fade show" role="alert">
        <i class="ri-airplay-line label-icon"></i><strong>Info</strong> - Label icon arrow  alert
        <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button>
    </div>

    <!-- Light Alert -->
    <div class="alert alert-light alert-dismissible alert-label-icon label-arrow fade show" role="alert">
        <i class="ri-mail-line label-icon"></i><strong>Light</strong> - Label icon arrow  alert
        <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button>
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark alert-dismissible alert-label-icon label-arrow fade show mb-0" role="alert">
        <i class="ri-refresh-line label-icon"></i><strong>Dark</strong> - Label icon arrow  alert
        <button type="button" class="btn-close" data-bs-dismiss=" alert" aria-label="Close"></button>
    </div>

#### Rounded Label Icon Alerts

Show Code

Use the `alert-label-icon rounded-label` class to set an alert with a rounded label icon.

###### Primary Alert

Primary - Rounded label alert

###### Secondary Alert

Secondary - Rounded label alert

###### Success Alert

Success - Rounded label alert

###### Danger Alert

Danger - Rounded label alert

###### Warning Alert

Warning - Rounded label alert

###### Info Alert

Info - Rounded label alert

###### Light Alert

Light - Rounded label alert

###### Dark Alert

Dark - Rounded label alert

    <!-- Primary Alert -->
    <div class="alert alert-primary alert-dismissible alert-label-icon rounded-label fade show" role="alert">
        <i class="ri-user-smile-line label-icon"></i><strong>Primary</strong> - Rounded label alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Secondary Alert -->
    <div class="alert alert-secondary alert-dismissible alert-label-icon rounded-label fade show" role="alert">
        <i class="ri-check-double-line label-icon"></i><strong>Secondary</strong> - Rounded label alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Success Alert -->
    <div class="alert alert-success alert-dismissible alert-label-icon rounded-label fade show" role="alert">
        <i class="ri-notification-off-line label-icon"></i><strong>Success</strong> - Rounded label alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Danger Alert -->
    <div class="alert alert-danger alert-dismissible alert-label-icon rounded-label fade show" role="alert">
        <i class="ri-error-warning-line label-icon"></i><strong>Danger</strong> - Rounded label alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Warning Alert -->
    <div class="alert alert-warning alert-dismissible alert-label-icon rounded-label fade show" role="alert">
        <i class="ri-alert-line label-icon"></i><strong>Warning</strong> - Rounded label alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Info Alert -->
    <div class="alert alert-info alert-dismissible alert-label-icon rounded-label fade show" role="alert">
        <i class="ri-airplay-line label-icon"></i><strong>Info</strong> - Rounded label alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Light Alert -->
    <div class="alert alert-light alert-dismissible alert-label-icon rounded-label fade show" role="alert">
        <i class="ri-mail-line label-icon"></i><strong>Light</strong> - Rounded label alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Dark Alert -->
    <div class="alert alert-dark alert-dismissible alert-label-icon rounded-label fade show" role="alert">
        <i class="ri-refresh-line label-icon"></i><strong>Dark</strong> - Rounded label alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

#### Solid Alerts

Show Code

Use the `bg-*`, `border-*` & `text-white` class to set an alert with solid style.

###### Primary Solid Alert

Hi! - Solid primary alert example

###### Secondary Solid Alert

How are you! - Solid secondary alert example

###### Success Solid Alert

Yey! Everything worked! - Solid success alert example

###### Danger Solid Alert

Something is very wrong! - Solid danger alert example

###### Warning Solid Alert

Uh oh, something went wrong! - Solid warning alert example

###### Info Solid Alert

Don't forget' it ! - Solid info alert example

###### Light Solid Alert

Mind Your Step! - Solid secondary alert example

###### Dark Solid Alert

Did you know? - Solid dark alert example

    <!-- Primary Alert -->
    <div class="alert bg-primary border-primary text-white" role="alert">
        <strong>Hi!</strong> - Solid <b>primary alert</b> example
    </div>

    <!-- Secondary Alert -->
    <div class="alert bg-secondary border-secondary text-white" role="alert">
        <strong>How are you!</strong> - Solid <b>secondary alert</b> example
    </div>

    <!-- Success Alert -->
    <div class="alert bg-success border-success text-white" role="alert">
        <strong>Yey! Everything worked!</strong> - Solid <b>success alert</b> example
    </div>

    <!-- Danger Alert -->
    <div class="alert bg-danger border-danger text-white" role="alert">
        <strong>Something is very wrong!</strong> - Solid <b>danger alert</b> example
    </div>

    <!-- Warning Alert -->
    <div class="alert bg-warning border-warning text-white" role="alert">
        <strong>Uh oh, something went w rong!</strong> - Solid <b>warning alert</b> example
    </div>

    <!-- Info Alert -->
    <div class="alert bg-info border-info text-white" role="alert">
        <strong>Don't forget' it !</strong> - Solid <b>info alert</b> example
    </div>

    <!-- Light Alert -->
    <div class="alert bg-light border-light text-body" role="alert">
        <strong>Mind Your Step!</strong> - Solid <b>light alert</b> example
    </div>

    <!-- Dark Alert -->
    <div class="alert bg-dark border-dark text-white mb-0" role="alert">
        <strong>Did you know?</strong> - Solid <b>dark alert</b> example
    </div>

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three