Callouts

Contents

1. Get Started
2. Grid
3. Containers
4. Navbars
5. Positioning
6. Responsive
7. Typography
8. Images
9. Tables
10. Buttons
11. Forms
12. Callouts
13. Carousels

Simple callouts

Callouts can be used to make important information stand out on a page. Six callout classes are provided: callout-default, callout-primary, callout-info, callout-success, callout-warning, and callout-danger. Each is demonstrated below.

  
<div class="callout-default">Lorem ipsum...</div>
<div class="callout-primary">Lorem ipsum...</div>
<div class="callout-info">Lorem ipsum...</div>
<div class="callout-success">Lorem ipsum...</div>
<div class="callout-warning">Lorem ipsum...</div>
<div class="callout-danger">Lorem ipsum...</div>
  

Callouts with headings

Optionally, headings and paragraphs can be included in callouts. All headings will be styled the same regardless of how they are styled elsewhere on the site, so use whatever heading level makes sense semantically.

  
<div class="callout-info">
  <h4>Info callout</h4>
  <p>Lorem ipsum...</p>
</div>