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.

As you see in my example, I've already did this but it's not making it full-width of the screen. — agis, Aug 14 '15 at 09:38
An image of what you are trying to do would be more helpful. I'm not getting it from the demo. — Paulie_D, Aug 14 '15 at 09:39
http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Aug 14 '15 at 09:42
@agis Try: `.content { margin-left: -45px; margin-right: -45px }`. — Abraar Arique Diganto, Aug 14 '15 at 09:42
In the jsbin that I've provided you will see that there is a black background color and some "lorem ipsum" text inside it. I want that background color to take the whole screen width. — agis, Aug 14 '15 at 09:42
It's nothing to do with the overlay though..right? If so, see my link ^^^ — Paulie_D, Aug 14 '15 at 09:42
@AbraarArique That's a bit hacky, and I will have problems on various screen sizes. — agis, Aug 14 '15 at 09:43
See my Linked Question/Answer above which is also in the right column thataway --> — Paulie_D, Aug 14 '15 at 09:48
@Paulie_D I've tried with your "pseudo-element" method but it's not working. Here it's the updated jsbin: https://jsbin.com/cohazenimu/1/edit?html,css,console,output — agis, Aug 14 '15 at 10:21

DavidDomain · Answer 1 · 2016-09-05T10:13:15.383

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>

Please, remember Booststrap Docs comments: "Note that, due to padding and more, neither container is nestable". — pedrozopayares, Jun 16 '16 at 20:01
That is why i gave a second example using the `.jumbotron` class. I delete the first example with nested container elements. Thanks for the hint. ;) — DavidDomain, Jun 17 '16 at 07:07

score 5 · Answer 2 · edited May 23 '17 at 12:17

5

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.

edited May 23 '17 at 12:17

Community

1
1

answered Jun 17 '16 at 05:09

Magnus

6,791
8
53
84

score 2 · Answer 3 · answered Jun 18 '16 at 13:18

Just create a full width wrap element (div, section, etc.). Then, use .container class for a responsive fixed width container:

<article class="featured">
  <img class="bg-featured" src="http://placehold.it/1200x400"></img>
  <div class="overlay"></div>
  <div class="full-width"> /*  ADD FULL WIDTH WRAP CLASS */
    <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>
  </div>
</article>

Daybreak · Answer 4 · 2015-08-14T11:59:57.130

Bootstrap .container class adds a left and right padding of 15px. Either use negative padding to fix it (padding-left: -15px; padding-right:-15px) or you can make a new .containerNew class in another css file and add these styles. For example in a file called myStyles.css do the following:

.containerNew {
  background-color: green;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0px;
  padding-right: 0px;
}

<div class="containerNew">
  
  <div class="row">
    
    <div class="col-md-12">
      
        <!-- Your Content Here -->
      
    </div>
    
  </div>
  
</div>

full width background color inside container bootstrap

4 Answers4