Alerts

See Bootstrap docs
<div class="alert alert-primary" role="alert">
  This is a primary alert-check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This secondary alert is a new addition to the group.
</div>
<div class="alert alert-success" role="alert">
  You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-purple" role="alert">
  This is a purple alert, check it out!
</div>
<div class="alert alert-warning" role="alert">
  Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  Change a few things up and try submitting again.
</div>
<div class="alert alert-light" role="alert">
  This is a light alert-check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a light alert-check it out!
</div>

Dismissing alerts

<div class="alert alert-info alert-dismissible fade show" role="alert">
  <strong>Close me!</strong> you can click the close button whenever you're ready.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>