<div class="container py-5">
  <div class="row">
    <div class="alert alert-primary text-white font-weight-bold" role="alert">
      A simple primary alert—check it out!
    </div>
    <div class="alert alert-secondary text-white font-weight-bold" role="alert">
      A simple secondary alert—check it out!
    </div>
    <div class="alert alert-success text-white font-weight-bold" role="alert">
      A simple success alert—check it out!
    </div>
    <div class="alert alert-danger text-white font-weight-bold" role="alert">
      A simple danger alert—check it out!
    </div>
    <div class="alert alert-warning text-white font-weight-bold" role="alert">
      A simple warning alert—check it out!
    </div>
    <div class="alert alert-info text-white font-weight-bold" role="alert">
      A simple info alert—check it out!
    </div>
    <div class="alert alert-light text-white font-weight-bold" role="alert">
      A simple light alert—check it out!
    </div>
    <div class="alert alert-dark text-white font-weight-bold" role="alert">
      A simple dark alert—check it out!
    </div>
  </div>
</div>

<div class="container py-5">
  <div class="row">
    <div class="alert alert-primary text-white" role="alert">
      A simple primary alert with <a href="javascript:;" class="alert-link text-white text-decoration-underline">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-secondary text-white" role="alert">
      A simple secondary alert with <a href="javascript:;" class="alert-link text-white text-decoration-underline">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-success text-white" role="alert">
      A simple success alert with <a href="javascript:;" class="alert-link text-white text-decoration-underline">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-danger text-white" role="alert">
      A simple danger alert with <a href="javascript:;" class="alert-link text-white text-decoration-underline">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-warning text-white" role="alert">
      A simple warning alert with <a href="javascript:;" class="alert-link text-white text-decoration-underline">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-info text-white" role="alert">
      A simple info alert with <a href="javascript:;" class="alert-link text-white text-decoration-underline">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-light text-white" role="alert">
      A simple light alert with <a href="javascript:;" class="alert-link text-white text-decoration-underline">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-dark text-white" role="alert">
      A simple dark alert with <a href="javascript:;" class="alert-link text-white  text-decoration-underline">an example link</a>. Give it a click if you like.
    </div>
  </div>
</div>

<div class="container py-10">
  <div class="row">
    <div class="alert alert-success text-white" role="alert">
      <h4 class="alert-heading">Good job!</h4>
      <p>That’s the main thing people are controlled by! Thoughts- their perception of themselves! They&#39;re slowed down by their perception of themselves. If you&#39;re taught you can&#39;t do anything, you won&#39;t do anything. I was taught I could do everything.</p>
      <hr class="horizontal light">
      <p class="mb-0">What else could rust the heart more over time? Blackgold.</p>
    </div>
  </div>
</div>

<div class="container py-7 mt-3">
  <div class="row">
    <div class="alert alert-warning alert-dismissible text-white fade show" role="alert">
      <strong>Holy molly!</strong> You should check in on some of those fields below.
      <button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>