Alerts

Basic Alert 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields
below.
<button type="button" class="btn-close" data-bs-dismiss="alert"
    aria-label="Close"><i class="bi bi-x"></i></button>
</div>
Live example 
<div id="liveAlertPlaceholder">
    <div class="mb-2"></div>
    <div class="mb-2"></div>
    <div class="mb-2"></div>
    <div class="mb-2"></div>
</div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live
    alert
</button>
Default alerts 
<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>

<div class="alert alert-secondary" role="alert">
    A simple secondary alert—check it out!
</div>

<div class="alert alert-success" role="alert">
    A simple success alert—check it out!
</div>

<div class="alert alert-danger" role="alert">
    A simple danger alert—check it out!
</div>

<div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
</div>

<div class="alert alert-info" role="alert">
    A simple info alert—check it out!
</div>

<div class="alert alert-light" role="alert">
    A simple light alert—check it out!
</div>

<div class="alert alert-dark" role="alert">
    A simple dark alert—check it out!
</div>
Links in alerts 
<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" role="alert">
    A simple dark alert with <a href="#" class="alert-link">an example link</a>.
    Give it a click if you like.
</div>
Solid Colored Alerts
A simple solid primary alert—check it out!
A simple solid secondary alert—check it out!
A simple solid info alert—check it out!
A simple solid warning alert—check it out!
A simple solid success alert—check it out! 
<div class="alert alert-solid-primary alert-dismissible fade show">
    A simple solid primary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-secondary alert-dismissible fade show">
    A simple solid secondary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-info alert-dismissible fade show">
    A simple solid info alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-warning alert-dismissible fade show">
    A simple solid warning alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-success alert-dismissible fade show">
    A simple solid success alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-danger alert-dismissible fade show">
    A simple solid danger alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-light alert-dismissible fade show">
    A simple solid light alert—check it out!
    <button type="button" class="btn-close text-default" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-dark alert-dismissible fade show text-white">
    A simple solid dark alert—check it out!
    <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>
Outline Alerts
A simple outline primary alert—check it out!
A simple outline secondary alert—check it out!
A simple outline info alert—check it out!
A simple outline warning alert—check it out!
A simple outline success alert—check it out! 
<div class="alert alert-solid-primary alert-dismissible fade show">
    A simple solid primary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-secondary alert-dismissible fade show">
    A simple solid secondary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-info alert-dismissible fade show">
    A simple solid info alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-warning alert-dismissible fade show">
    A simple solid warning alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-success alert-dismissible fade show">
    A simple solid success alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-danger alert-dismissible fade show">
    A simple solid danger alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-light alert-dismissible fade show">
    A simple solid light alert—check it out!
    <button type="button" class="btn-close text-default" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-dark alert-dismissible fade show text-white">
    A simple solid dark alert—check it out!
    <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>
Rounded Solid Alerts
A simple solid rounded primary alert—check it out!
A simple solid rounded secondary alert—check it out!
A simple solid rounded warning alert—check it out!
A simple solid rounded danger alert—check it out! 
<div class="alert alert-solid-primary rounded-pill alert-dismissible fade show">
    A simple solid rounded primary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-secondary rounded-pill alert-dismissible fade show">
    A simple solid rounded secondary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-warning rounded-pill alert-dismissible fade show">
    A simple solid rounded warning alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-solid-danger rounded-pill alert-dismissible fade show">
    A simple solid rounded danger alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>
Rounded Outline Alerts
A simple outline rounded primary alert—check it out!
A simple outline rounded secondary alert—check it out!
A simple outline rounded warning alert—check it out!
A simple outline rounded danger alert—check it out! 
<div class="alert alert-outline-primary rounded-pill alert-dismissible fade show">
    A simple outline rounded primary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-outline-secondary rounded-pill alert-dismissible fade show">
    A simple outline rounded secondary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-outline-warning rounded-pill alert-dismissible fade show">
    A simple outline rounded warning alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-outline-danger rounded-pill alert-dismissible fade show">
    A simple outline rounded danger alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>
Rounded Default Alerts
A simple rounded primary alert—check it out!
A simple rounded secondary alert—check it out!
A simple rounded warning alert—check it out!
A simple rounded danger alert—check it out! 
<div class="alert alert-primary rounded-pill alert-dismissible fade show">
    A simple rounded primary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-secondary rounded-pill alert-dismissible fade show">
    A simple rounded secondary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-warning rounded-pill alert-dismissible fade show">
    A simple rounded warning alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-danger rounded-pill alert-dismissible fade show">
    A simple rounded danger alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>
Rounded Alerts With Custom Close Button
A simple rounded primary alert—check it out!
A simple rounded secondary alert—check it out!
A simple rounded warning alert—check it out!
A simple rounded danger alert—check it out! 
<div class="alert alert-primary rounded-pill alert-dismissible fade show">
    A simple rounded primary alert—check it out!
    <button type="button" class="btn-close custom-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-secondary rounded-pill alert-dismissible fade show">
    A simple rounded secondary alert—check it out!
    <button type="button" class="btn-close custom-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-warning rounded-pill alert-dismissible fade show">
    A simple rounded warning alert—check it out!
    <button type="button" class="btn-close custom-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-danger rounded-pill alert-dismissible fade show">
    A simple rounded danger alert—check it out!
    <button type="button" class="btn-close custom-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>
Alerts with icons 
<div class="alert alert-primary d-flex align-items-center" role="alert">
    <svg class="flex-shrink-0 me-2 svg-primary" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
    <div>
        An example alert with an icon
    </div>
</div>

<div class="alert alert-success d-flex align-items-center" role="alert">
    <svg class="flex-shrink-0 me-2 svg-success" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
    <div>
        An example success alert with an icon
    </div>
</div>

<div class="alert alert-warning d-flex align-items-center" role="alert">
    <svg class="flex-shrink-0 me-2 svg-warning" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M12,5.99L19.53,19H4.47L12,5.99 M12,2L1,21h22L12,2L12,2z"/><polygon points="13,16 11,16 11,18 13,18"/><polygon points="13,10 11,10 11,15 13,15"/></g></g></g></svg>
    <div>
        An example warning alert with an icon
    </div>
</div>

<div class="alert alert-danger d-flex align-items-center" role="alert">
    <svg class="flex-shrink-0 me-2 svg-danger" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M15.73,3H8.27L3,8.27v7.46L8.27,21h7.46L21,15.73V8.27L15.73,3z M19,14.9L14.9,19H9.1L5,14.9V9.1L9.1,5h5.8L19,9.1V14.9z"/><rect height="6" width="2" x="11" y="7"/><rect height="2" width="2" x="11" y="15"/></g></g></g></svg>
    <div>
        An example danger alert with an icon
    </div>
</div>
Customized Alerts With SVG's 
<div class="alert alert-primary alert-dismissible fade show custom-alert-icon shadow-sm" role="alert">
    <svg class="svg-primary" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
    A customized primary alert with an icon
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-secondary alert-dismissible fade show custom-alert-icon shadow-sm" role="alert">
    <svg class="svg-secondary" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
    A customized secondary alert with an icon
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-warning alert-dismissible fade show custom-alert-icon shadow-sm" role="alert">
    <svg class="svg-warning" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
    A customized warning alert with an icon
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>

<div class="alert alert-danger alert-dismissible fade show custom-alert-icon shadow-sm" role="alert">
    <svg class="svg-danger" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/></svg>
    A customized danger alert with an icon
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button>
</div>