CSS Bootstrap container background - html

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.

Answer 3

For Boostrap V4.0 and later
If you want to use boostrap colors as background, you can use these colors for the background, like below example
<div class="container bg-dark">
<!-- your content -->
</div>