Callout

Callouts provide contextual messages to draw attention of the user. See the examples below:

Basic

I have a message for you, but not so important.

Good

I have a message that may help you to understand better.

Warning

I have a warning for you. Be careful.

Critital

I have a critical message for you. This is really important.

Source code

<div class="callout">
  <h5>Basic</h5>
  <p>I have a message for you, but not so important.</p>
</div>
<div class="callout callout-info">
  <h5>Good</h5>
  <p>I have a message that may help you to understand better.</p>
</div>
<div class="callout callout-warning">
  <h5>Warning</h5>
  <p>I have a warning for you. Be careful.</p>
</div>
<div class="callout callout-danger">
  <h5>Critital</h5>
  <p>I have a critical message for you. This is really important.</p>
</div>