the callouts from the bootstrap documentation

docs style (bootstrap)

/* Side notes for calling out things
-------------------------------------------------- */

/* Base styles (regardless of theme) */
.bs-callout {
  margin: 20px 0;
  padding: 15px 30px 15px 15px;
  border-left: 5px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
  background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
  background-color: #fcf2f2;
  border-color: #dFb5b4;
}
.bs-callout-warning {
  background-color: #fefbed;
  border-color: #f1e7bc;
}
.bs-callout-info {
  background-color: #f0f7fd;
  border-color: #d0e3f0;
}

Thanks!

Just wondering ... why aren't these styles included in the normal distribution of Bootstrap?

@ksnyde - agreed - these would be nice in addition to alerts in the normal distribution

also - it would make sense to have a green version for success

.bs-callout-success {
background-color: #dff0d8;
border-color: #d6e9c6;
}

thanks!

Ha! I knew someone would have these beautiful callouts up. Thanks.

my full version

/* Side notes for calling out things
-------------------------------------------------- */

/* Base styles (regardless of theme) */
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
.bs-callout h1,
.bs-callout h2,
.bs-callout h3,
.bs-callout h4,
.bs-callout h5,
.bs-callout h6 {
margin-top: 0;
}

.bs-callout-danger h1,
.bs-callout-danger h2,
.bs-callout-danger h3,
.bs-callout-danger h4,
.bs-callout-danger h5,
.bs-callout-danger h6 {
color: #B94A48;
}

.bs-callout-warning h1,
.bs-callout-warning h2,
.bs-callout-warning h3,
.bs-callout-warning h4,
.bs-callout-warning h5,
.bs-callout-warning h6 {
color: #C09853;
}

.bs-callout-info h1,
.bs-callout-info h2,
.bs-callout-info h3,
.bs-callout-info h4,
.bs-callout-info h5,
.bs-callout-info h6 {
color: #3A87AD;
}

.bs-callout-success h1,
.bs-callout-success h2,
.bs-callout-success h3,
.bs-callout-success h4,
.bs-callout-success h5,
.bs-callout-success h6 {
color: #3C763D;
}

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

.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #dFb5b4;
}
.bs-callout-warning {
background-color: #fefbed;
border-color: #f1e7bc;
}
.bs-callout-info {
background-color: #f0f7fd;
border-color: #d0e3f0;
}
.bs-callout-success {
background-color: #dff0d8;
border-color: #d6e9c6;
}

Here is camaleo's css as a LESS mixin for people who compile bootstrap from source. You'll probably have to tweak the @bgcolor values to match your color palette -- these values are based on bootstrap default colors.

@import "variables.less";

.bs-callout(@color, @bgcolor: lighten(@color, 35%)) {
    display: block;
    margin: 20px 0;
    padding: 15px 30px 15px 15px;
    border-left: 5px solid @color;
    background-color: @bgcolor;
    h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        color: @color;
    }
    p:last-child {
        margin-bottom: 0;
    }
    code, .highlight {
        background-color: #fff;
    }
}

.bs-callout-primary {
    .bs-callout(@brand-primary, lighten(@brand-primary, 45%));
}

.bs-callout-danger {
    .bs-callout(@brand-danger);
}

.bs-callout-warning {
    .bs-callout(@brand-warning, lighten(@brand-warning, 30%));
}

.bs-callout-info {
    .bs-callout(@brand-info);
}

.bs-callout-success {
    .bs-callout(@brand-success);
}

Appreciate the LESS mixin @adamjarret — thanks!!

Shouldn't the mixin actually be:

@import "variables.less";

.bs-callout(@color, @bgcolor: lighten(@color, 35%)) {
    display: block;
    margin: 20px 0;
    padding: 15px 30px 15px 15px;
    border-left: 5px solid @color;
    background-color: @bgcolor;
    h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        color: @color;
    }
    p:last-child {
        margin-bottom: 0;
    }
    code, .highlight {
        background-color: #fff;
    }
}

.bs-callout-primary {
    .bs-callout(@brand-primary, lighten(@brand-primary, 45%));
}

.bs-callout-danger {
    .bs-callout(@brand-danger, lighten(@brand-danger, 30%));
}

.bs-callout-warning {
    .bs-callout(@brand-warning, lighten(@brand-warning, 30%));
}

.bs-callout-info {
    .bs-callout(@brand-info, lighten(@brand-info, 30%));
}

.bs-callout-success {
    .bs-callout(@brand-success, lighten(@brand-success, 30%));
}

I was getting compiler errors for missing 2nd parameters in the calls to the mixin.

Thanks for the less mixin ! Any idea what the "bs-" prefix stands for in the original bootstrap site?

@HereThereBeMonsters Call me crazy, but I'll bet it stands for bootstrap.

👍

Thanks dudes, saves me five minutes again!

Doesn't this need margin: 0; for .bs-callout so you can wrap the callout inside a <div class="panel panel-default" /> in order to get the border and the slightly rounded corners?

Here's dotnetchris's in sass:

@mixin bs-callout($color, $bgcolor) {
  display: block;
  margin: 20px 0;
  padding: 15px 30px 15px 15px;
  border: 1px solid;
  border-left-width: 5px;
  border-color: lighten($color, 25%);
  border-left-color: $color;
  background-color: $bgcolor;
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    color: $color;
  }
  p:last-child {
    margin-bottom: 0;
  }
  code, .highlight {
    background-color: #fff;
  }
}

.bs-callout-primary {
  @include bs-callout($brand-primary, lighten($brand-primary, 45%));
}

.bs-callout-danger {
  @include bs-callout($brand-danger, lighten($brand-danger, 30%));
}

.bs-callout-warning {
  @include bs-callout($brand-warning, lighten($brand-warning, 50%));
}

.bs-callout-info {
  @include bs-callout($brand-info, lighten($brand-info, 40%));
}

.bs-callout-success {
  @include bs-callout($brand-success, lighten($brand-success, 40%));
}

Thanks :)

Thanks!

There also is a Bootstrap 3 theme which should do it for ya' http://scottdorman.github.io/bootstrap-flat/components.html#callouts

Or, in nuget : PM> Install-Package Twitter.Bootstrap.Flat

This is good stuff, thanks!

👍

@Gman29
Thanks for the sass version, it really helped.

Thanks

Thanks

👍 Good , thanks

Brilliant work with the sass mixin @Gman29, thanks

I like it. Thanks! 👍

Thanks for sharing!!

nice thanks for it :)

the corrected code, with bootstrap5 shortcodes support:

/* Side notes for calling out things /
/ Base styles (regardless of theme) /
.bs-callout {
padding: 1.25rem;
margin-top: 1.25rem;
border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
background-color: var(--bd-callout-bg, var(--bs-gray-100));
}
.bs-callout h4 {
margin-top: 0;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: var(--bs-gray-100);
}
/ Themes for different contexts */
.bs-callout-danger {
--bd-callout-bg: rgba(var(--bs-danger-rgb), .075);
--bd-callout-border: rgba(var(--bs-danger-rgb), .5);
}
.bs-callout-warning {
--bd-callout-bg: rgba(var(--bs-warning-rgb), .075);
--bd-callout-border: rgba(var(--bs-warning-rgb), .5);
}
.bs-callout-info {
--bd-callout-bg: rgba(var(--bs-info-rgb), .075);
--bd-callout-border: rgba(var(--bs-info-rgb), .5);
}