Menu
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.
400
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With