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

Borderless Alerts

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

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

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

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

Outline Alerts

Use the alert-outline 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
HTML Preview
<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible alert-outline 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 alert-outline 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 alert-outline 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 alert-outline 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 alert-outline 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 alert-outline 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 alert-outline 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
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 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>

Modern Alerts

Use the alert-modern class to set an alert modern.

Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
HTML Preview
<!-- Primary Alert -->
<div class="alert alert-primary alert-modern alert-dismissible fade show" role="alert">
    <i class="ri-user-smile-line icons"></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-modern alert-dismissible fade show" role="alert">
    <i class="ri-check-double-line icons"></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-modern alert-dismissible fade show" role="alert">
    <i class="ri-notification-off-line icons"></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-modern alert-dismissible fade show" role="alert">
    <i class="ri-error-warning-line icons"></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-modern alert-dismissible fade show" role="alert">
    <i class="ri-alert-line icons"></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-modern alert-dismissible fade show" role="alert">
    <i class="ri-airplay-line icons"></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-modern alert-dismissible fade show" role="alert">
    <i class="ri-mail-line icons"></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-modern alert-dismissible fade show" role="alert">
    <i class="ri-refresh-line icons"></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
HTML Preview
<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible alert-solid 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 alert-solid 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 alert-solid 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 alert-solid 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 alert-solid 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 alert-solid 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 alert-solid 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 alert-solid 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
Danger Alert
Success Alert
Warning Alert
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-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

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
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-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-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
Secondary Alert
Success Alert
Danger Alert
Warning Alert
info Alert
Light Alert
Dark 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 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
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 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 alert-solid 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
HTML Preview
<!-- Primary Alert -->
<div class="alert alert-primary alert-solid" role="alert">
<strong>Hi!</strong> - Solid <b>primary alert</b> example
</div>

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

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

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

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

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

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

<!-- Dark Alert -->
<div class="alert alert-dark alert-solid mb-0" role="alert">
<strong>Did you know?</strong> - Solid <b>dark alert</b> example
</div>
© Toner.
Design & Develop by Themesbrand