Full color background inside bootstrap container
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 the full background color to the "content" div.
How to do it using CSS?
Here is jsbin to show you exactly what I'm trying to do.
For this purpose you can use the .jumbotron class. Just don't put it inside an element with a .container class.
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> I answered the same question: Bootstrap 3.0: full-color background, compact columns in the center
In the end, you simply add another element around the container and style it as you wish. It will cover the entire width. A container inside a container-fluid not considered good practice.
Just create a full width element (div, section, etc.). Then use the .container class for the adaptive container with a fixed width:
<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> The Bootstrap.container class adds 15px left and right padding. Either use a negative add-on to fix it (padding-left: -15px; padding-right: -15px), or you can create a new .containerNew class in another css file and add these styles. For example, in the myStyles.css file, do the following: