Skip to content

Instantly share code, notes, and snippets.

@matthiasg

matthiasg/docs style (bootstrap)

Created August 5, 2013 06:26
Show Gist options
  • Star 83 You must be signed in to star a gist
  • Fork 17 You must be signed in to fork a gist
  • Save matthiasg/6153853 to your computer and use it in GitHub Desktop.
Save matthiasg/6153853 to your computer and use it in GitHub Desktop.
Download ZIP
the callouts from the bootstrap documentation
Raw
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;
}
@romansklenar
Copy link

Thanks!

@yankeeinlondon
Copy link

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

@ckluis
Copy link

ckluis commented Feb 14, 2014

@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

@mwmeyer
Copy link

mwmeyer commented Feb 18, 2014

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

@dancaron
Copy link

thanks!

@aaronpeterson
Copy link

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

@camaleo
Copy link

camaleo commented Mar 2, 2014

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

@adamjarret
Copy link

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

@t1merickson
Copy link

Appreciate the LESS mixin @adamjarret — thanks!!

@dotnetchris
Copy link

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.

@HereThereBeMonsters
Copy link

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

@rusterholz
Copy link

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

@ioleo
Copy link

ioleo commented Jul 2, 2014

👍

@katastophy
Copy link

Thanks dudes, saves me five minutes again!

@Redsandro
Copy link

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?

@jpbassalot
Copy link

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

@johnmckay-reward
Copy link

Thanks :)

@joseadrian
Copy link

Thanks!

@aarshtalati
Copy link

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

@robinvanb
Copy link

This is good stuff, thanks!

@smhayhan
Copy link

👍

@harryjoy
Copy link

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

@rodionchernyshov
Copy link

Thanks

@zanderwar
Copy link

Thanks

@fathyar
Copy link

fathyar commented Jun 12, 2016

👍 Good , thanks

@phily245
Copy link

Brilliant work with the sass mixin @Gman29, thanks

@mickgeek
Copy link

I like it. Thanks! 👍

@peterli1001
Copy link

Thanks for sharing!!

@rahulkashyapknl
Copy link

nice thanks for it :)

@netgoblin
Copy link

netgoblin commented Feb 6, 2023 •
edited

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment