CSS Bootstrap container background

Question

I am using bootstrap and I was wondering what would be a clean way to give a background to my container.

I am using the bootstrap class container, not container-fluid. Bootstrap doc clearly states that I shouldn't nest containers, so what is the alternative to achieve this goal ? If I set a background to my container the left and right margins are still white, I want to colour that space as well, but I also want my content to be aligned the way the container is aligned, not the way the container-fluid is aligned. Any suggestions ? My current solution is nesting a container inside container-fluid and remove the padding from the first one, but I want to make a better solution that doesn't go against the bootstrap documentation.

Thanks in advance !

EDIT

Here is for example what I had

<div class="container-fluid my-class">
    <div class="container">
        Some rows and columns here
    </div>
</div>

and then I override bootstrap's padding in css

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.my-class {
    background: red;
}

But, like I said, this is the bad way to do it.

Answer 1

Bootstrap doc clearly states that I shouldn't nest containers under other containers so just nest your container div under a new class div say, container-bg and add the background-image to that div like this:

HTML:

<div class="container-bg">
    <div class="container">
        <!-- your content -->
    </div>
</div>

CSS:

.container-bg {
    background: xxx;
}

Answer 2

If you want to set the background for the whole page, then set it on body.

If you want to set it for a section of the page, then wrap that section in an appropriate element (such as div or section), add a class, id or some other way to target it with a selector … just not one that uses a class provided by Bootstrap.