i2p-styleguide/_includes/components/alerts.html

<div id="alerts" class="col page-header mb-4">
    <h2>Alerts</h2>
    <p class="text-muted">Some Description about alerts.</p>
</div>
<div class="row p-5 bg-light">
    <div class="col-12 alert alert-primary" role="alert">
        <p class="mb-0">This is a primary alert — check it out!</p>
    </div>
    <div class="col-12 alert alert-secondary" role="alert">
        <p class="mb-0">This is a default alert — check it out!</p>
    </div>
    <div class="col-12 alert alert-success" role="alert">
        <p class="mb-0">This is a success alert — check it out!</p>
    </div>
    <div class="col-12 alert alert-warning" role="alert">
        <p class="mb-0">This is a warning alert — check it out!</p>
    </div>
    <div class="col-12 alert alert-danger" role="alert">
        <p class="mb-0">This is a danger alert — check it out!</p>
    </div>
    <div class="col-12 alert alert-success" role="alert">
				<h4 class="alert-header">Well done!</h4>
        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
				<hr>
				<p class="mb-0">Also some extra text and a <a href="#alerts" class="alert-link">link</a>.</p>
    </div>
</div>