box-shadow on bootstrap 3 container

css, grid, html, shadow, twitter-bootstrap

Solution

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



    <div class="container">
        <div class="row">one</div>
        <div class="row">two</div>
        <div class="row">three</div>
    </div>
</body>

Problem

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: https://i.stack.imgur.com/JddoL.png EDIT: this problem was only present until bootstrap 3 rc2. the final bootstrap 3 makes the workaround below obsolete.

Original source