<div class="alert alert-success" role="alert">
  This is a success alert — check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert — check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert — check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert — check it out!
</div>

<div class="alert alert-success" role="alert">
  This is a success alert — <a href="#" class="alert-link">check it out</a>!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert — <a href="#" class="alert-link">check it out</a>!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert — <a href="#" class="alert-link">check it out</a>!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert — <a href="#" class="alert-link">check it out</a>!
</div>

<div class="alert alert-success alert-dismissible" role="alert">
  This is a success alert — check it out!
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
  This is a info alert — check it out!
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
  This is a warning alert — check it out!
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
  This is a danger alert — check it out!
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
</div>

<div class="alert alert-success" role="alert">
  <!-- SVG icon code -->
  This is a success alert — check it out!
</div>
<div class="alert alert-info" role="alert">
  <!-- SVG icon code -->
  This is a info alert — check it out!
</div>
<div class="alert alert-warning" role="alert">
  <!-- SVG icon code -->
  This is a warning alert — check it out!
</div>
<div class="alert alert-danger" role="alert">
  <!-- SVG icon code -->
  This is a danger alert — check it out!
</div>

<div class="alert alert-success" role="alert">
  <span class="avatar" style="background-image: url(...)"></span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-info" role="alert">
  <span class="avatar">JL</span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-warning" role="alert">
  <span class="avatar" style="background-image: url(...)"></span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-danger" role="alert">
  <span class="avatar" style="background-image: url(...)"></span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<div class="alert alert-success alert-dismissible" role="alert">
  <h3>Some Title</h3>
  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
  <div class="btn-list">
    <a href="#" class="btn btn-success">Save changes</a>
    <a href="#" class="btn btn-secondary">Cancel</a>
  </div>
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
</div>