Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<div class="alert alert-primary" role="alert">Primary alert!</div>
<div class="alert alert-secondary" role="alert">Secondary alert!</div>
<div class="alert alert-success" role="alert">Success alert!</div>
<div class="alert alert-danger" role="alert">Danger alert!</div>
<div class="alert alert-warning" role="alert">Warning alert!</div>
<div class="alert alert-info" role="alert">Info alert!</div>
<div class="alert alert-dark" role="alert">Dark alert!</div>

   Copy to clipboard

   Open in CodePen

<div class="alert alert-primary" role="alert">Primary alert with <a href="#" class="alert-link">example link</a>.</div>
<div class="alert alert-secondary" role="alert">Secondary alert with <a href="#" class="alert-link">example link</a>.</div>
<div class="alert alert-success" role="alert">Success alert with <a href="#" class="alert-link">example link</a>.</div>
<div class="alert alert-danger" role="alert">Danger alert with <a href="#" class="alert-link">example link</a>.</div>
<div class="alert alert-warning" role="alert">Warning alert with <a href="#" class="alert-link">example link</a>.</div>
<div class="alert alert-info" role="alert">Info alert with <a href="#" class="alert-link">example link</a>.</div>
<div class="alert alert-dark" role="alert">Dark alert with <a href="#" class="alert-link">example link</a>.</div>

   Copy to clipboard

   Open in CodePen

<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-square me-2" viewBox="0 0 16 16">
    <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
    <path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z"></path>
  </svg>
  <div>Success alert with icon</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-square me-2" viewBox="0 0 16 16">
    <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
    <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"></path>
  </svg>
  <div>Danger alert with icon</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-square me-2" viewBox="0 0 16 16">
    <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
    <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"></path>
  </svg>
  <div>Warning alert with icon</div>
</div>
<div class="alert alert-info d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-square me-2" viewBox="0 0 16 16">
    <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"></path>
    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
  </svg>
  <div>Info alert with icon</div>
</div>

   Copy to clipboard

   Open in CodePen

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Success!</h4>
  <p>You have accomplished <a href="#" class="alert-link">your goal</a>.</p>
  <p class="mb-0">You can now continue and start defining a new goal to reach.</p>
</div>
<div class="alert alert-danger" role="alert">
  <h4 class="alert-heading">Danger!</h4>
  <p>Something is wrong. <a href="#" class="alert-link">Please try again.</a></p>
  <p class="mb-0">Make sure that you enter the correct user name and corresponding password.</p>
</div>
<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">Warning!</h4>
  <p>Be careful when you <a href="#" class="alert-link">drive.</a></p>
  <p class="mb-0">Driving is a serious task and should thus be taken seriously.</p>
</div>
<div class="alert alert-info" role="alert">
  <h4 class="alert-heading">Info!</h4>
  <p>Please read the provided <a href="#" class="alert-link">information.</a></p>
  <p class="mb-0">The information will help you get a better understanding of the topic.</p>
</div>

   Copy to clipboard

   Open in CodePen

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  <strong>Success!</strong> This alert will fade away when clicking the × button.
</div>