<div class="card">
  <div class="card-body">
    <h2 class="card-title">Alerts with action</h2>
    <div role="alert" class="alert alert-important alert-danger alert-dismissible">
      <div class="alert-icon">
        <!-- Download SVG icon from http://tabler.io/icons/icon/alert-circle -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon alert-icon icon-2">
          <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
          <path d="M12 8v4"></path>
          <path d="M12 16h.01"></path>
        </svg>
      </div> An error occurred! <a href="#" class="alert-action">Link</a>
      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    </div>
    <div class="alert alert-danger alert-dismissible" role="alert">
      <div class="alert-icon">
        <!-- Download SVG icon from http://tabler.io/icons/icon/alert-circle -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon alert-icon icon-2">
          <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
          <path d="M12 8v4"></path>
          <path d="M12 16h.01"></path>
        </svg>
      </div> An error occurred! <a href="#" class="alert-action">Link</a>
      <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
    </div>
  </div>
</div>