<div class="nondismissible-alert">
  <div class="row">
    <div class="col-12">
      <h2>Alerts</h2>
      <div class="alert alert-primary" role="alert">
        <i class="fas fa-exclamation-triangle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
      </div>
      <div class="alert alert-secondary" role="alert">
        <i class="fas fa-exclamation-triangle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
      </div>
      <div class="alert alert-success" role="alert">
        <i class="fas fa-exclamation-triangle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
      </div>
      <div class="alert alert-danger" role="alert">
        <i class="fas fa-exclamation-triangle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
      </div>
      <div class="alert alert-warning" role="alert">
        <i class="fas fa-exclamation-triangle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
      </div>
      <div class="alert alert-info" role="alert">
        <i class="fas fa-exclamation-triangle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
      </div>
      <div class="alert alert-light" role="alert">
        <i class="fas fa-exclamation-triangle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
      </div>
      <div class="alert alert-dark" role="alert">
        <i class="fas fa-exclamation-triangle"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
      </div>
    </div>
  </div>
</div>
          

  <div class="dismissible-alert">
  <div class="row">
    <div class="col-12">
      <h2>Dismissible Alerts</h2>
        <div class="alert alert-primary alert-dismissible fade show" role="alert">
          <i class="fas fa-exclamation-triangle"></i><strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. In nec nulla non nisi feugiat placerat. Pellentesque vel rhoncus odio, sed hendrerit libero.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="alert alert-secondary alert-dismissible fade show" role="alert">
          <i class="fas fa-exclamation-triangle"></i><strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. In nec nulla non nisi feugiat placerat. Pellentesque vel rhoncus odio, sed hendrerit libero.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
          <i class="fas fa-exclamation-triangle"></i><strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. In nec nulla non nisi feugiat placerat. Pellentesque vel rhoncus odio, sed hendrerit libero.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
          <i class="fas fa-exclamation-triangle"></i><strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. In nec nulla non nisi feugiat placerat. Pellentesque vel rhoncus odio, sed hendrerit libero.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <i class="fas fa-exclamation-triangle"></i><strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. In nec nulla non nisi feugiat placerat. Pellentesque vel rhoncus odio, sed hendrerit libero.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="alert alert-info alert-dismissible fade show" role="alert">
          <i class="fas fa-exclamation-triangle"></i><strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. In nec nulla non nisi feugiat placerat. Pellentesque vel rhoncus odio, sed hendrerit libero.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="alert alert-light alert-dismissible fade show" role="alert">
          <i class="fas fa-exclamation-triangle"></i><strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. In nec nulla non nisi feugiat placerat. Pellentesque vel rhoncus odio, sed hendrerit libero.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="alert alert-dark alert-dismissible fade show" role="alert">
          <i class="fas fa-exclamation-triangle"></i><strong>Lorem ipsum dolor sit amet</strong> consectetur adipiscing elit. In nec nulla non nisi feugiat placerat. Pellentesque vel rhoncus odio, sed hendrerit libero.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
    </div>
  </div>
</div>