Use the alert class to show a default alert.

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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