How to format background color using twitter bootstrap?

How to format background color using twitter bootstrap?

I am playing with the styles on the website here: http://www.grabapper.com
I am trying to include background-color #2ba6cb on the hero unit. When I include:

The color doesn’t go all the way to the edge of the page. How do I get the background color to go to the edge of the page?

Solutions/Answers:

Solution 1:

Move your row before <div class="container marketing"> and wrap it with a new container, because current container width is 1170px (not 100%):

<div class='hero'>
  <div class="row">
   ...
  </div>
</div>

CSS:

.hero {
  background-color: #2ba6cb;
  padding: 0 90px;
}

Solution 2:

Bootstrap default “contextual backgrounds” helper classes to change the background color:

.bg-primary
.bg-default
.bg-info
.bg-warning
.bg-danger

If you need set custom background color then, you can write your own custom classes in style.css( a custom css file)
example below

.bg-pink
{
  background-color: #CE6F9E;
}

Solution 3:

Just add a div around the container so it looks like:

<div style="background: red;">
  <div class="container marketing">
    <h2 style="padding-top: 60px;"></h2>
  </div>
</div>

Related:  Twitter Bootstrap dropdown menu

References