<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="bd-callout bd-callout-default">
<h4>Default Callout</h4>
This is a default callout.
</div>
<div class="bd-callout bd-callout-primary">
<h4>Primary Callout</h4>
This is a primary callout.
</div>
<div class="bd-callout bd-callout-success">
<h4>Success Callout</h4>
This is a success callout.
</div>
<div class="bd-callout bd-callout-info">
<h4>Info Callout</h4>
This is an info callout.
</div>
<div class="bd-callout bd-callout-warning">
<h4>Warning Callout</h4>
This is a warning callout.
</div>
<div class="bd-callout bd-callout-danger">
<h4>Danger Callout</h4>
This is a danger callout.
</div>
