Alertsv4.x

<div class="alert alert-info alert-dismissible fade show" role="alert">
  This is an ‘info’ alert with a <a href="#" class="alert-link">custom colored link</a> added
  <button type="button" class="close" data-dismiss="alert" aria-label="close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-primary alert-dismissible fade show" role="alert">
  This is a ‘primary’ alert with a <a href="#" class="alert-link">custom colored link</a> added
  <button type="button" class="close" data-dismiss="alert" aria-label="close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  This is a ‘success’ alert with a <a href="#" class="alert-link">custom colored link</a> added
  <button type="button" class="close" data-dismiss="alert" aria-label="close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  This is a ‘warning’ alert with a <a href="#" class="alert-link">custom colored link</a> added
  <button type="button" class="close" data-dismiss="alert" aria-label="close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  This is a ‘danger’ alert with a <a href="#" class="alert-link">custom colored link</a> added
  <button type="button" class="close" data-dismiss="alert" aria-label="close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-light alert-dismissible fade show" role="alert">
  This is a ‘light’ alertwith a <a href="#" class="alert-link">custom colored link</a> added
  <button type="button" class="close" data-dismiss="alert" aria-label="close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-secondary alert-dismissible fade show" role="alert">
  This is a ‘secondary’ alert with a <a href="#" class="alert-link">custom colored link</a> added
  <button type="button" class="close" data-dismiss="alert" aria-label="close">
    <span aria-hidden="true">×</span>
  </button>
</div>

<div class="alert alert-dark alert-dismissible fade show" role="alert">
  This is a ‘dark’ alert with a <a href="#" class="alert-link">custom colored link</a> added
  <button type="button" class="close" data-dismiss="alert" aria-label="close">
    <span aria-hidden="true">×</span>
  </button>
</div>