Twitter Bootstrap - Full width background (image)

Question

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?

Answer 1

Try this, its work for me, wrap your code like this.

<div class="rowWrp">
    <div class="row colorBg">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
</div>

CSS it:

.colorBg {
   background:red;
  }

.rowWrp {
  background:red; 
  width:940px; 
  padding-right:20px;
  }

Here I assume we use fixed layout.

Answer 2

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

Answer 3

Try

body {
    background-color: green;
}

.container {
    background-color: transparent;
}