<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet">
<div class="section section-notifications">
<div class="container mb-5">
<h4>Notifications</h4>
</div>
<div class="alert alert-success" role="alert">
<div class="container">
<div class="alert-icon">
<i class="now-ui-icons ui-2_like"></i>
</div>
<strong>Well done!</strong> You successfully read this important alert message.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<i class="now-ui-icons ui-1_simple-remove"></i>
</span>
</button>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="container">
<div class="alert-icon">
<i class="now-ui-icons travel_info"></i>
</div>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<i class="now-ui-icons ui-1_simple-remove"></i>
</span>
</button>
</div>
</div>
<div class="alert alert-warning" role="alert">