alert-dismissible

bootstrap5.css

.alert-dismissible {
  padding-right: 4rem;
}

bootstrap5.css

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

html bootstrap5 Sample

アラートを閉じるボタンで消す：alert-dismissible

右側の「×」マークをクリックするとアラートが閉じます

  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    右側の「×」マークをクリックするとアラートが閉じます
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>