I'm building a little website using bootstrap. The base structure looks like this:
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" rel="stylesheet">
<style tpye="text/css">
.row {
height: 100px;
background-color: green;
}
.container {
margin-top: 50px;
box-shadow: 0 0 10px 10px black; /*THIS does not work as expected*/
}
</style>
</head>
<body>
<div class="container">
<div class="row">one</div>
<div class="row">two</div>
<div class="row">three</div>
</div>
</body>
</html>
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.
This question is related to
html
css
twitter-bootstrap
grid
shadow
The answer is
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
}
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 & right padding.
Example: http://jsfiddle.net/SHLu4/2/
It'll be something like:
<div class="container drop-shadow">
<div class="container">
<div class="row">
<div class="col-md-8">Main Area</div>
<div class="col-md-4">Side Area</div>
</div>
</div>
</div>
And your CSS:
<style>
.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;
}
</style>
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.
<div class="col-md-4" style="box-shadow: 0px 2px 25px rgba(0, 0, 0, .25);">
<div class="thumbnail">
{!! HTML::image('images/sampleImage.png') !!}
</div>
</div>
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.
<div class="col-md-4">
<div id="wrapper-div" style="box-shadow: 0px 2px 25px rgba(0, 0, 0, .25);">
<div class="thumbnail">
{!! HTML::image('images/sampleImage.png') !!}
</div>
</div>
</div>
Source: Stackoverflow.com