full width background color inside container bootstrap

Question

I have this markup:

<article class="featured">
<img class="bg-featured" src="http://placehold.it/1200x400"></img>
 <div class="overlay"></div>

      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="featured-excerpt">
            <div class="meta">
              <div class="category">Watch</div>
              <ul class="tags">
              <li>Sustainability, Global, Learning</li>
              </ul>
            </div>
            <div class="content">
               <h1 class="title">Title</h1>
               <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
               quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
               consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
               cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
               proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
               <div class="sponsored">Sponsored content:</div>
            </div>

          </div>
          </div>

        </div>
      </div>
  </article>

And I want to apply to the "content" div a full width background color.

How can I do this through CSS?

Here is a jsbin to show you exactly what I'm trying to do.

Answer 1

You could use the .jumbotron class for this purpose. Just make sure not to put it inside an element with .container class.

Jumbotron

So here is an example using .jumbotron.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

body {
  margin: 0;
}

.content {
  background-color: green;
}

.jumbotron {
  background-color: orange;
}

.no-left-right-padding {
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 1200px) {
  img {
    width: 100%;
    height: auto;
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<img class="bg-featured img-responsive" src="http://placehold.it/1200x400"></img>
<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="title">Title</h1>
        <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div class="sponsored">Sponsored content:</div>  
      </div>
    </div>
  </div>
</div>

Answer 2

I answered the same question here: Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center

In summary, you simply add another element around the container, and style it as you like. It will cover the full width. A container inside a container-fluid is not considered good practice.