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:
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?


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">


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

Solution 2:

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


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

  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>

Related:  Twitter Bootstrap dropdown menu