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

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

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

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

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

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

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

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

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

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

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

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

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