When using the Bootstrap 4 Grid system, my structure looks like this: https://i.sstatic.net/MB2C7.png
Inside each row, I have a content column and two empty columns. At times, I need to style the entire row with CSS.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
Lorem ipsum
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
dolor sit amet,
</div>
<div class="col-sm-3"></div>
</div>
....
<div class="row custom-background-color">
<div class="col-sm-3"></div>
<div class="col-sm-6">
consecteur adipiscing elit,
</div>
<div class="col-sm-3"></div>
</div>
</div>
However, having duplicate code makes it less convenient. I would like to optimize the code by defining the column only once.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="row">Lorem ipsum</div>
<div class="row">dolor sit amet,</div>
...
<div class="row custom-background-color">consecteur adipiscing elit,</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
I want the CSS styles to apply to the full page width instead of just one column. Is there a workaround or solution for this issue?