Bootstrap .container-fluid with ".container-like" layout

Question

I have a Bootstrap website built using .container for the layout with an additional CSS property for .container in my site CSS:

.container {
    width: 1170px;
}

I'm now trying to move to a .container-fluid layout so I can have full-screen background images in my divs, but at the same time I still need the actual content of my divs to have a .container-like layout. I have so far tried to nest a .container in a .container-fluid but this does not seem like the best solution or a good practice for that matter.

Any guidance would be greatly appreciated.

Answer 1

I recently wanted to do this but some of the solutions I found were more complex than needed. What I did was pretty much exactly what uʍopǝpısdn has already suggested in the comments of your question, i.e. wrap .container in a div.

I created some color styles for each of the sections I needed colored:

.bg-black {
    background-color: #111;
}
//add more colors, even background images in a similar manner

And used those styles as classes of each wrapping div:

<div class="bg-black">
    <div class="container">
        //content here
    </div>
</div>
<div class="bg-red">
    <div class="container">
        //other content here
    </div>
</div>
//...and so on

This solution obviously requires you to restructure your HTML to use one .container per section instead of one .container per body, which I found to work quite well.