Twitter Bootstrap 3.2.0 Callouts

index.html

<div class="container">

  <div class="bs-callout bs-callout-default">
    <h4>Default Callout</h4>This is a default callout.</div>
  <div class="bs-callout bs-callout-primary">
    <h4>Primary Callout</h4>This is a primary callout.</div>
  <div class="bs-callout bs-callout-success">
    <h4>Success Callout</h4>This is a success callout.</div>
  <div class="bs-callout bs-callout-info-right">
    <h4>Info Callout</h4>This is an info callout on right.</div>
  <div class="bs-callout bs-callout-warning">
    <h4>Warning Callout</h4>This is a warning callout.</div>
  <div class="bs-callout bs-callout-danger-right">
    <h4>Danger Callout</h4>This is a danger callout on right.</div>
</div>

style.css

/* BS Callout Add-on Usage:
 * <div class="bs-callout bs-callout-default"><h4>Default Callout</h4>This is a default callout.</div>
 * <div class="bs-callout bs-callout-primary"><h4>Primary Callout</h4>This is a primary callout.</div>
 * <div class="bs-callout bs-callout-success"><h4>Success Callout</h4>This is a success callout.</div>
 * <div class="bs-callout bs-callout-info-right"><h4>Info Callout</h4>This is an info callout on right.</div>
 * <div class="bs-callout bs-callout-warning"><h4>Warning Callout</h4>This is a warning callout.</div>
 * <div class="bs-callout bs-callout-danger-right"><h4>Danger Callout</h4>This is a danger callout on right.</div>
*/

.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}

.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}

.bs-callout p:last-child {
  margin-bottom: 0;
}

.bs-callout code {
  border-radius: 3px;
}

.bs-callout+.bs-callout {
  margin-top: -5px;
}

.bs-callout-default {
  border-left-color: #777;
}

.bs-callout-default-right {
  border-right-width: 5px;
  border-left-width: 1px;
  border-right-color: #777;
}

.bs-callout-default h4,
.bs-callout-default-right h4 {
  color: #777;
}

.bs-callout-primary {
  border-left-color: #428bca;
}

.bs-callout-primary-right {
  border-right-width: 5px;
  border-left-width: 1px;
  border-right-color: #428bca;
}

.bs-callout-primary h4,
.bs-callout-primary-right h4 {
  color: #428bca;
}

.bs-callout-success {
  border-left-color: #5cb85c;
}

.bs-callout-success-right {
  border-right-width: 5px;
  border-left-width: 1px;
  border-right-color: #5cb85c;
}

.bs-callout-success h4,
.bs-callout-success-right h4 {
  color: #5cb85c;
}

.bs-callout-info {
  border-left-color: #5bc0de;
}

.bs-callout-info-right {
  border-right-width: 5px;
  border-left-width: 1px;
  border-right-color: #5bc0de;
}

.bs-callout-info h4,
.bs-callout-info-right h4 {
  color: #5bc0de;
}

.bs-callout-warning {
  border-left-color: #f0ad4e;
}

.bs-callout-warning-right {
  border-right-width: 5px;
  border-left-width: 1px;
  border-right-color: #f0ad4e;
}

.bs-callout-warning h4,
.bs-callout-warning-right h4 {
  color: #f0ad4e;
}

.bs-callout-danger {
  border-left-color: #d9534f;
}

.bs-callout-danger-right {
  border-right-width: 5px;
  border-left-width: 1px;
  border-right-color: #d9534f;
}

.bs-callout-danger h4,
.bs-callout-danger-right h4 {
  color: #d9534f;
}

Twitter Bootstrap 3.2.0 Callouts.markdown

Twitter Bootstrap 3.2.0 Callouts

The Bootstrap documentation has really nice callouts to draw attention to important information, but for some reason these callouts are not included in the actual Bootstrap distribution. The generic callout CSS and the styles for the info, warning, and danger callouts is a direct pull from the live CSS for the docs. Styles for default, success, and primary, are created by me, as the Bootstrap docs do not employ these.

Forked from Chris Pratt's Pen Twitter Bootstrap 3.2.0 Callouts.

A Pen by Dave Hunsberger on CodePen.

License.