Alert

<div role="alert" class="alert alert-warning d-flex shadow-sm align-items-center">
  <div role="img" aria-label="Warning icon" class="bi bi-exclamation-triangle-fill fs-3 me-3 align-self-center
              d-flex justify-content-center"></div>
  <div class="text-body">
    <div class="fw-semibold">Warning</div>
    <div>Alert text</div>
    <div>
      <a href="#"><i class="bi bi-box-arrow-up-right me-1"></i>Link</a>
    </div>
  </div>
</div>

Notes:

• This alert style is often used within an application body to visually distinguish content to the user. In these cases, including the role="alert" on the outer div is inappropriate, since this role is only for time-sensitive information that the screen reader should announce immediately. See ARIA: alert role for more info.

Dimissable Alert

  <div class="alert alert-warning alert-dismissible shadow-sm d-flex align-items-center">
  <div role="img" aria-label="Warning icon" class="bi bi-exclamation-triangle-fill fs-3 me-3"></div>
  <div class="text-body">
    <div class="fw-semibold">Warning</div>
    <div>Warning text</div>
    <div>
      <a href="#"><i class="bi bi-box-arrow-up-right me-1"></i>Link</a>
    </div>
  </div>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>