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>

Angela Bernier

David Grasso

Mike Bunch

Web Apps

My Cart

Your Cart is Empty!

Branded T-Shirts

$320

Bentwood Chair

$89

Borosil Paper Cup

$750

Gray Styled T-Shirt

$ 1250

Stillbird Helmet

$990

$1258.58

Notifications

Your Elite author Graphic Optimization reward is ready!

Angela Bernier

You have received 20 new messages in the conversation

Maureen Gibson

James Lemire

Angela Bernier

Kenneth Brown

Maureen Gibson

Alerts

Default Alerts

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

Light Alert

Dark Alert

Borderless Alerts

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

Light Alert

Dark Alert

Dismissing Alerts

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

Light Alert

Dark Alert

Link Color Alerts

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

Light Alert

Dark Alert

Live Alert Example

Outline Alerts

Primary Outline Alert

Secondary Outline Alert

Success Outline Alert

Danger Outline Alert

Warning Outline Alert

Info Outline Alert

Dark Alert

Left Border Alerts

Primary Alert

Secondary Alert

Success Alert

Danger Alert

Warning Alert

Info Alert

Light Alert