<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<input type="checkbox" name="t-help" id="t-help" checked>
<input type="checkbox" name="t-success" id="t-success" checked>
<input type="checkbox" name="t-warning" id="t-warning" checked>
<input type="checkbox" name="t-error" id="t-error" checked>
<div class="toast-panel">
<div class="toast-item help">
<div class="toast help">
<label for="t-help" class="close"></label>
<h3>Help!</h3>
<p>Do you have a problem? Just use this <a href="#">contact form</a>.</p>
</div>
</div>
<div class="toast-item success">
<div class="toast success">
<label for="t-success" class="close"></label>
<h3>Success!</h3>
<p>Your message has been sent successfully.</p>
</div>
</div>
<div class="toast-item warning">
<div class="toast warning">
<label for="t-warning" class="close"></label>
<h3>Warning!</h3>
<p>Sorry, there was a problem with your request.</p>
</div>
</div>
<div class="toast-item error">
<div class="toast error">
<label for="t-error" class="close"></label>
<h3>Error!</h3>
