Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
the callouts from the bootstrap documentation
/* 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;
}
@timvink

This comment has been minimized.

Copy link

timvink commented Oct 2, 2013

Thanks!

@gowestweb

This comment has been minimized.

Copy link

gowestweb commented Oct 30, 2013

perfect, thank you.

@isoceles

This comment has been minimized.

Copy link

isoceles commented Nov 1, 2013

Thanks!
Also here here is the CSS for the h4 tags:

.bs-callout-danger h4 {
color: #B94A48;
}

.bs-callout-warning h4 {
color: #C09853;
}

.bs-callout-info h4 {
color: #3A87AD;
}

@andrewmth

This comment has been minimized.

Copy link

andrewmth commented Dec 14, 2013

thanks dude. you are awesome..

@tommymcdonald

This comment has been minimized.

Copy link

tommymcdonald commented Jan 18, 2014

Radical, thanks so much for this.

@MaximeRDY

This comment has been minimized.

Copy link

MaximeRDY commented Jan 29, 2014

Thanks dude. It's pretty awesome :D

@romansklenar

This comment has been minimized.

Copy link

romansklenar commented Feb 5, 2014

Thanks!

@ksnyde

This comment has been minimized.

Copy link

ksnyde commented Feb 8, 2014

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

@ckluis

This comment has been minimized.

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

This comment has been minimized.

Copy link

mwmeyer commented Feb 18, 2014

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

@dancaron

This comment has been minimized.

Copy link

dancaron commented Feb 21, 2014

thanks!

@aaronpeterson

This comment has been minimized.

Copy link

aaronpeterson commented Feb 22, 2014

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

@camaleo

This comment has been minimized.

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

This comment has been minimized.

Copy link

adamjarret commented Mar 22, 2014

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

This comment has been minimized.

Copy link

t1merickson commented Apr 24, 2014

Appreciate the LESS mixin @adamjarret — thanks!!

@dotnetchris

This comment has been minimized.

Copy link

dotnetchris commented May 7, 2014

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

This comment has been minimized.

Copy link

HereThereBeMonsters commented Jun 17, 2014

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

@rusterholz

This comment has been minimized.

Copy link

rusterholz commented Jun 20, 2014

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

@ioleo

This comment has been minimized.

Copy link

ioleo commented Jul 2, 2014

👍

@katastophy

This comment has been minimized.

Copy link

katastophy commented Jul 6, 2014

Thanks dudes, saves me five minutes again!

@Redsandro

This comment has been minimized.

Copy link

Redsandro commented Jul 17, 2014

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?

@gravyboatcpt

This comment has been minimized.

Copy link

gravyboatcpt commented Aug 17, 2014

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

This comment has been minimized.

Copy link

jmkni commented Aug 22, 2014

Thanks :)

@joseadrian

This comment has been minimized.

Copy link

joseadrian commented Sep 3, 2014

Thanks!

@ablaze8

This comment has been minimized.

Copy link

ablaze8 commented Sep 24, 2014

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

This comment has been minimized.

Copy link

robinvanb commented Oct 21, 2014

This is good stuff, thanks!

@smhayhan

This comment has been minimized.

Copy link

smhayhan commented Nov 26, 2014

👍

@harryjoy

This comment has been minimized.

Copy link

harryjoy commented Dec 11, 2014

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

@RadikChernyshov

This comment has been minimized.

Copy link

RadikChernyshov commented Jun 9, 2015

Thanks

@zanderwar

This comment has been minimized.

Copy link

zanderwar commented Aug 3, 2015

Thanks

@fathyar

This comment has been minimized.

Copy link

fathyar commented Jun 12, 2016

👍 Good , thanks

@phily245

This comment has been minimized.

Copy link

phily245 commented Jun 30, 2016

Brilliant work with the sass mixin @Gman29, thanks

@mickgeek

This comment has been minimized.

Copy link

mickgeek commented Jul 13, 2016

I like it. Thanks! 👍

@peterli1001

This comment has been minimized.

Copy link

peterli1001 commented Apr 28, 2017

Thanks for sharing!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.