Alerts

  1. Ui Elements
  2. 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>
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!
A simple outline danger alert—check it out!
A simple outline light alert—check it out!
A simple outline dark 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>
Solid Alerts With Different Shadows
A simple solid primary alert with small shadow—check it out!
A simple solid primary alert with normal shadow—check it out!
A simple solid primary alert with large shadow—check it out!
A simple solid secondary alert with small shadow—check it out!
A simple solid secondary alert with normal shadow—check it out!
A simple solid secondary alert with large shadow—check it out! 
<div class="alert alert-solid-primary shadow-sm alert-dismissible fade show">
    A simple solid primary alert with small shadow—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-primary shadow alert-dismissible fade show">
    A simple solid primary alert with normal shadow—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-primary shadow-lg alert-dismissible fade show">
    A simple solid primary alert with large shadow—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 shadow-sm alert-dismissible fade show">
    A simple solid secondary alert with small shadow—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 shadow alert-dismissible fade