Currently, I am utilizing bootstrap and trying to find an elegant solution for adding a background to my container.
Specifically, I am working with the bootstrap class container, as opposed to container-fluid. The official Bootstrap documentation advises against nesting containers, so I am searching for an alternative method to achieve this objective. When I apply a background to my container, the white margins on the left and right sides remain visible. My goal is to color those spaces while maintaining the alignment of the content in line with the container, not the way it appears with container-fluid. Do you have any recommendations? Currently, my workaround involves nestinng a container within a container-fluid, removing padding from the former, but I want a more compliant solution that adheres to Bootstrap guidelines.
Thank you in advance!
EDIT
As an example, here is what I had implemented:
<div class="container-fluid my-class">
<div class="container">
Some rows and columns here
</div>
</div>
Then, I would override Bootstrap's padding using CSS
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.my-class {
background: red;
}
However, as stated earlier, this approach is not recommended.