Bootstrap 4 Callouts pulled from https://v4-alpha.getbootstrap.com/assets/css/docs.min.css

callout.css

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem
}

.bd-callout h4 {
    margin-top: 0;
    margin-bottom: .25rem
}

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

.bd-callout code {
    border-radius: .25rem
}

.bd-callout+.bd-callout {
    margin-top: -.25rem
}

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

.bd-callout-info h4 {
    color: #5bc0de
}

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

.bd-callout-warning h4 {
    color: #f0ad4e
}

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

.bd-callout-danger h4 {
    color: #d9534f
}

Thank you!!!

SCSS Version

/*
$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;
 */

.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem;
  h2,h3,h4,h5 {
    margin-top: 0;
    margin-bottom: .25rem
  }
  p:last-child {
    margin-bottom: 0
  }
  code {
    border-radius: .25rem
  }
}

.bd-callout-primary{
  border-left-color: $primary;
  h2,h3,h4,h5 {
    color: $primary
  }
}

.bd-callout-secondary{
  border-left-color: $secondary;
  h2,h3,h4,h5 {
    color: $secondary
  }
}
.bd-callout-success {
  border-left-color: $success;
  h2,h3,h4,h5 {
    color: $success
  }
}
.bd-callout-info {
  border-left-color: $info;
  h2,h3,h4,h5 {
    color: $info
  }
}
.bd-callout-warning {
  border-left-color: $warning;
  h2,h3,h4,h5 {
    color: $warning
  }
}
.bd-callout-danger {
  border-left-color:$danger;
  h2,h3,h4,h5 {
    color: $danger
  }
}
.bd-callout-light {
  border-left-color: $light;
  h2,h3,h4,h5 {
    color: $light
  }
}
.bd-callout-dark {
  border-left-color: $dark;
  h2,h3,h4,h5 {
    color: $dark
  }
}

Thank you!

Nice!

Love this. It looks great.

If anybody's using custom theme colours, this SCSS might help:

.callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem;

  h2,h3,h4,h5 {
    margin-top: 0;
    margin-bottom: .25rem;
  }

  p:last-child {
    margin-bottom: 0;
  }

  code {
    border-radius: .25rem;
  }
}

@each $color, $value in $theme-colors {
  .callout-#{$color} {
    border-left-color: $value;

    h2,h3,h4,h5 {
      color: $value;
    }
  }
}

Love this. It looks great.

If anybody's using custom theme colours, this SCSS might help: ...

@jacobwalkr this is perfect, thank you!