<div class="alert alert-primary" role="alert">
    This information is for your reference
</div>
<div class="alert alert-secondary" role="alert">
    Check the details before proceeding.
</div>
<div class="alert alert-success" role="alert">
    Your action was successful.
</div>
<div class="alert alert-danger" role="alert">
    There was an error with your action.
</div>
<div class="alert alert-warning" role="alert">
    There might be an issue you need to check.
</div>
<div class="alert alert-info" role="alert">
    Here is some information for you.
</div>
<div class="alert alert-light" role="alert">
    Try out the latest tool added to your dashboard.
</div>
<div class="alert alert-dark mb-0" role="alert">
    Updates are available in your profile settings.
</div>

<div class="alert alert-outline-primary" role="alert">
    This information is for your reference
</div>
<div class="alert alert-outline-secondary" role="alert">
    Check the details before proceeding.
</div>
<div class="alert alert-outline-success" role="alert">
    Everything is set up and ready to go.
</div>
<div class="alert alert-outline-danger" role="alert">
    We couldn’t process your request. Please try again later.
</div>
<div class="alert alert-outline-warning" role="alert">
    This action will permanently delete the item.
</div>
<div class="alert alert-outline-info" role="alert">
    Scheduled maintenance will occur at midnight.
</div>
<div class="alert alert-outline-light" role="alert">
    You can enable notifications in your profile.
</div>
<div class="alert alert-outline-dark mb-0" role="alert">
    Try out the latest tool added to your dashboard.
</div>

<div class="alert alert-subtle-primary" role="alert">
    A simple primary alert—check it out!
</div>
<div class="alert alert-subtle-secondary" role="alert">
    A simple secondary alert—check it out!
</div>
<div class="alert alert-subtle-success" role="alert">
    A simple success alert—check it out!
</div>
<div class="alert alert-subtle-danger" role="alert">
    A simple danger alert—check it out!
</div>
<div class="alert alert-subtle-warning" role="alert">
    A simple warning alert—check it out!
</div>
<div class="alert alert-subtle-info" role="alert">
    A simple info alert—check it out!
</div>
<div class="alert alert-subtle-dark" role="alert">
    A simple dark alert—check it out!
</div>

<div class="alert alert-border-primary" role="alert">
    A simple primary alert—check it out!
</div>
<div class="alert alert-border-secondary" role="alert">
    A simple secondary alert—check it out!
</div>
<div class="alert alert-border-success" role="alert">
    A simple success alert—check it out!
</div>
<div class="alert alert-border-danger" role="alert">
    A simple danger alert—check it out!
</div>
<div class="alert alert-border-warning" role="alert">
    A simple warning alert—check it out!
</div>
<div class="alert alert-border-info" role="alert">
    A simple info alert—check it out!
</div>
<div class="alert alert-border-dark" role="alert">
    A simple dark alert—check it out!
</div>

<div class="alert alert-subtle-primary d-flex align-items-center" role="alert">
    <i class="bi bi-info-circle-fill me-2"></i>
    A simple primary alert—check it out!
</div>
<div class="alert alert-subtle-secondary d-flex align-items-center" role="alert">
    <i class="bi bi-exclamation-circle-fill me-2"></i>
    A simple secondary alert—check it out!
</div>
<div class="alert alert-subtle-success d-flex align-items-center" role="alert">
    <i class="bi bi-check-circle-fill me-2"></i>
    A simple success alert—check it out!
</div>
<div class="alert alert-subtle-danger d-flex align-items-center" role="alert">
    <i class="bi bi-x-circle-fill me-2"></i>
    A simple danger alert—check it out!
</div>

<div class="alert alert-border-primary d-flex align-items-center" role="alert">
    <i class="bi bi-info-circle-fill me-2"></i>
    <div>A simple primary alert—check it out!</div>
</div>
<div class="alert alert-border-secondary d-flex align-items-center" role="alert">
    <i class="bi bi-exclamation-circle-fill me-2"></i>
    <div>A simple secondary alert—check it out!</div>
</div>
<div class="alert alert-border-success d-flex align-items-center" role="alert">
    <i class="bi bi-check-circle-fill me-2"></i>
    <div>A simple success alert—check it out!</div>
</div>
<div class="alert alert-border-danger d-flex align-items-center" role="alert">
    <i class="bi bi-x-circle-fill me-2"></i>
    <div>A simple danger alert—check it out!</div>
</div>

<div class="alert alert-solid-primary" role="alert">
    A simple primary alert—check it out!
</div>
<div class="alert alert-solid-secondary" role="alert">
    A simple secondary alert—check it out!
</div>
<div class="alert alert-solid-success" role="alert">
    A simple success alert—check it out!
</div>
<div class="alert alert-solid-danger" role="alert">
    A simple danger alert—check it out!
</div>
<div class="alert alert-solid-warning" role="alert">
    A simple warning alert—check it out!
</div>
<div class="alert alert-solid-info" role="alert">
    A simple info alert—check it out!
</div>
<div class="alert alert-solid-light" role="alert">
    A simple light alert—check it out!
</div>
<div class="alert alert-solid-dark mb-0" role="alert">
    A simple dark alert—check it out!
</div>

<div class="alert alert-primary" role="alert">
    A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
    A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
    A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
    A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
    A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
    A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
    A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark mb-0" role="alert">
    A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>