box-shadow on bootstrap 3 container

Question

I m building a little website using bootstrap  The base structure looks like this    lt  DOCTYPE html gt   lt html gt     lt head gt       lt link href  http   netdna bootstrapcdn com bootstrap 3 0 0-wip css bootstrap min css  rel  stylesheet  gt       lt style tpye  text css  gt           row               height  100px              background-color  green                      container               margin-top  50px              box-shadow  0 0 10px 10px black    THIS does not work as expected                  lt  style gt     lt  head gt     lt body gt       lt div class  container  gt           lt div class  row  gt one lt  div gt           lt div class  row  gt two lt  div gt           lt div class  row  gt three lt  div gt       lt  div gt     lt  body gt   lt  html gt    See it in action  http   jsfiddle net ZDCjq   Now I want the whole site to have a dropshadow on all 4 sides  The problem is  that the bootstrap grid makes use of negative margins and this makes the rows overlap the shadow   Is there a way to accomplish this while leaving all bootstrap functionality intact   EDIT  The expected result is this  http   i imgur com rPKuDhc png  EDIT  this problem was only present until bootstrap 3 rc2  the final bootstrap 3 makes the workaround below obsolete

User · Answer

You should give the container an id and use that in your custom css file  which should be linked after the bootstrap css     container        box-shadow  values

User · Answer

http   jsfiddle net Y93TX 2         import url  http   netdna bootstrapcdn com bootstrap 3 0 0-wip css bootstrap min css      row       height  100px      background-color  green     container       margin-top  50px      box-shadow  0 0 30px black      padding 0 15px 0 15px            lt div class  container  gt           lt div class  row  gt one lt  div gt           lt div class  row  gt two lt  div gt           lt div class  row  gt three lt  div gt       lt  div gt   lt  body gt

User · Answer

For those wanting the box-shadow on the col-  container itself and not on the  container  you can add another div just inside the col-  element  and add the shadow to that  This element will not have the padding  and therefor not interfere   The first image has the box-shadow on the col-  element  Because of the 15px padding on the col element  the shadow is pushed to the outside of the div element rather than on the visual edges of it      lt div class  col-md-4  style  box-shadow  0px 2px 25px rgba 0  0  0   25    gt       lt div class  thumbnail  gt              HTML  image  images sampleImage png            lt  div gt   lt  div gt      The second image has a wrapper div with the box-shadow on it  This will place the box-shadow on the visual edges of the element      lt div class  col-md-4  gt       lt div id  wrapper-div  style  box-shadow  0px 2px 25px rgba 0  0  0   25    gt           lt div class  thumbnail  gt                  HTML  image  images sampleImage png                lt  div gt       lt  div gt   lt  div gt

User · Answer

Add an additional div around all container divs you want the drop shadow to encapsulate  Add the classes drop-shadow and container to the additional div  The class  container will keep the fluidity  Use the class  drop-shadow  or whatever you like  to add the box-shadow property  Then target the  drop-shadow div and negate the unwanted styles  container adds--such as left  amp  right padding   Example  http   jsfiddle net SHLu4 2   It ll be something like    lt div class  container drop-shadow  gt       lt div class  container  gt           lt div class  row  gt               lt div class  col-md-8  gt Main Area lt  div gt               lt div class  col-md-4  gt Side Area lt  div gt           lt  div gt       lt  div gt   lt  div gt    And your CSS    lt style gt       drop-shadow           -webkit-box-shadow  0 0 5px 2px rgba 0  0  0   5           box-shadow  0 0 5px 2px rgba 0  0  0   5              container drop-shadow           padding-left 0          padding-right 0         lt  style gt

[html] box-shadow on bootstrap 3 container

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to grid

Examples related to shadow