One reason for the issue you're facing could be that the columns are not wrapped within a container and row structure. Here's how it should be done:
<div class="container">
<div class="row">
<..... your columns here ....>
</div>
</div>
By using this structure, you ensure that the Bootstrap columns respond effectively.
When columns are placed next to each other, their backgrounds touch, leading to a seamless color effect. However, you can prevent this using some CSS:
.col-styling {
height: 100px;
margin-bottom: 1.5rem;
background-color: green;
background-clip: content-box;
}
Apply this style to each column individually. Take a look at this example: https://codepen.io/kikosoft/pen/VwBZWQK
The background-clip: content-box; property is key here. It ensures that the background doesn't spill behind the padding border, a useful CSS feature.
In a typical Bootstrap setup, you wouldn't assign a background color to a column. Instead, the column acts as a container for content which can have its own background color. When content has margins, the backgrounds won't overlap. Here's an example:
<div class="container">
<div class="row">
<div class="col-6">
<div class="content-styling">1</div>
</div>
<div class="col-6">
<div class="content-styling">2</div>
</div>
<div class="col-6">
<div class="content-styling">3</div>
</div>
<div class="col-6">
<div class="content-styling">4</div>
</div>
<div class="col-6">
<div class="content-styling">5</div>
</div>
<div class="col-6">
<div class="content-styling">6</div>
</div>
<div class="col-6">
<div class="content-styling">7</div>
</div>
</div>
</div>
Style the content like this:
.content-styling {
height: 100px;
margin-bottom: 1.5rem;
background-color: green;
}
View the implemented solution here: https://codepen.io/kikosoft/pen/RwBbMoR