Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap - Full width background (image)

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?

like image 823
Michael Avatar asked Apr 05 '12 16:04

Michael


1 Answers

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;
}
like image 100
Andres Ilich Avatar answered Jan 04 '23 08:01

Andres Ilich