I'm currenly on a project and I'm trying out the awesome Twitter Bootrtrap including the responsive grid. All works fine and dandy except for one issue.
How do you give the .container
(which holds the grid) a background color? Example:
<div class="container green">
<div class="row">
<div class="span6">
<p>This is a test</p>
</div>
</div>
<div class="row">
<div class="span6">
<p>This is a test</p>
</div>
</div>
</div>
.green{
background:green;
}
When I add a color to the container it will turn green but leaves a margin on the left side, about 20px. How do I implement a full-width background?
That margin you're seeing is due to the fact that the .row
class part of the grid system removes 20px from the left to accommodate the span
classes inside each row; that class reads as follows:
.row {
margin-left: -20px;
}
You can circumvent that by just wrapping your .container
div with another container with the background color of your choice, like so:
HTML
<div class="green">
<div class="container">
<div class="row">
<div class="span6">
<p>This is a test</p>
</div>
</div>
<div class="row">
<div class="span6">
<p>This is a test</p>
</div>
</div>
</div>
</div>
CSS
.green{
background:green;
}
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