Alerts

Default Alerts

Use the alert class to show a default alert.

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert alert-primary shadow" role="alert">
    <strong> Hi! </strong> A simple <b>Primary alert</b> —check it out!
</div>

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

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

<!-- danger Alert -->
<div class="alert alert-danger shadow" 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 shadow" 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 shadow" 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 shadow" role="alert">
    <strong> Mind Your Step! </strong> A simple <b>light alert</b> —check it out!
</div>

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

Borderless Alerts

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

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert border-0 shadow alert-primary" role="alert">
    <strong> Hi! </strong> A simple <b>Primary alert</b> —check it out!
</div>

<!-- Secondary Alert -->
<div class="alert border-0 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow alert-dark mb-0" role="alert">
    <strong> Did you know? </strong> A simple <b>dark alert</b> —check it out!
</div>

Dismissing Alerts

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

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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

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

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert alert-primary shadow" 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 shadow" 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 shadow" 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 shadow" 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 shadow" 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 shadow" 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 shadow" 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 shadow" 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

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

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

Primary Outline Alert
Secondary Outline Alert
Success Outline Alert
Danger Outline Alert
Warning Outline Alert
Info Outline Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible border-2 bg-body-secondary shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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

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

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert alert-primary alert-border-left alert-dismissible fade shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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

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

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible bg-primary text-white alert-label-icon shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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

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

Primary Alert
Danger Alert
Success Alert
Warning Alert
<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible alert-additional shadow 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 shadow 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 shadow 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 shadow 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

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

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert alert-primary alert-top-border alert-dismissible shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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

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

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
info Alert
Light Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible alert-label-icon label-arrow shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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

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

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible alert-label-icon rounded-label shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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 shadow 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

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

Primary Solid Alert
Secondary Solid Alert
Success Solid Alert
Danger Solid Alert
Warning Solid Alert
Info Solid Alert
Light Solid Alert
Dark Solid Alert
<!-- Primary Alert -->
<div class="alert bg-primary border-primary text-white shadow" role="alert">
    <strong>Hi!</strong> - Solid <b>primary alert</b> example
</div>

<!-- Secondary Alert -->
<div class="alert bg-secondary border-secondary text-white shadow" 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 shadow" 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 shadow" 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 shadow" 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 shadow" 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 shadow" 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 shadow mb-0" role="alert">
    <strong>Did you know?</strong> - Solid <b>dark alert</b> example
</div>
© Velzon.
Design & Develop by Themesbrand