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;
}

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);
}