Alerts

Default Alerts

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!

HTML Preview

<!-- 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 text-body" 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

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!

HTML Preview

<!-- 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 text-body 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

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!

HTML Preview

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

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.

HTML Preview

<!-- 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 text-body" role="alert">
    A simple <b>Dark alert</b> with <a href="#" class="alert-link text-reset">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.

HTML Preview

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

Outline Alerts

Use the 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

HTML Preview

<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible 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 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 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 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 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 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 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

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

HTML Preview

<!-- 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 text-body 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

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

HTML Preview

<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible text-white bg-primary 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 text-white bg-secondary 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 text-white bg-success 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 text-white bg-danger 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 text-white bg-warning 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 text-white bg-info 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 text-body bg-light 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 text-white bg-dark 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

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.

HTML Preview

<!-- 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-lg 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-lg 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-lg 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-lg 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

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

HTML Preview

<!-- 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-lg 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-lg 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-lg 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-lg 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-lg 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-lg 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-lg 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 text-body fade show mb-0" role="alert">
    <i class="ri-refresh-line me-3 align-middle fs-lg text-dark"></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

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

HTML Preview

<!-- 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 text-body 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

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

HTML Preview

<!-- 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 text-body 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 border-*, bg-*, 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

HTML Preview

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

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

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

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

<!-- Warning Alert -->
<div class="alert alert-warning border-warning bg-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 alert-info border-info bg-info text-white" role="alert">
    <strong>Don't forget' it !</strong> - Solid <b>info alert</b> example
</div>

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

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

Notifications 4

Push Notification

Judia Membership

Bella Bailey

Angela Bernier

Maureen Gibson

Judia Builder

Select Layouts

Vertical

Horizontal

Color Scheme

Light

Dark

Brand

Card Layout

Borderless

Border

Layout Width

Fluid

Boxed

Layout Position

Sidebar Size

Default

Compact

Small Hover View

Sidebar Color

Light

Dark

Topbar Color

Light

Dark

Brand

Topbar Images

Preloader

Enable

Disable

Default Alerts

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

Light Alert

Dark Alert

HTML Preview

Borderless Alerts

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

Light Alert

Dark Alert

HTML Preview

Dismissing Alerts

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

Light Alert

Dark Alert

HTML Preview

Link Color Alerts

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

Light Alert

Dark Alert

HTML Preview

Live Alert Example

HTML Preview

Outline Alerts