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 alert-borderless class to set alert without border.

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

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 alert-outline class to set an alert with outline.

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

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-modern class to set an alert modern.

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

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

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

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

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

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 alert-solid class to set an alert with solid style.

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