Alerts

Code

<div class="alert alert-success" role="alert">
  Record saved successfully.
</div>

<!-- Dismissible alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Heads up!</strong> Your trial ends soon.
  <button type="button" class="btn-close"
          data-bs-dismiss="alert"></button>
</div>

<!-- Alert with extra content -->
<div class="alert alert-danger" role="alert">
  <h4 class="alert-heading">Error</h4>
  <p>Something went wrong.</p>
  <hr>
  <p class="mb-0">Try again or contact support.</p>
</div>

Explanation

Alerts convey contextual messages with color variants like alert-success and alert-danger. Adding alert-dismissible plus a btn-close button with data-bs-dismiss enables one-click removal. The fade show classes animate the dismissal.

More Bootstrap Snippets