Currently, I am delving into the world of Bootstrap 4 grid. My focus right now is experimenting with creating responsive boxes that adjust based on window size changes.
In my design, these are how the boxes should respond:
- Large: Box 1, Box 2, Box 3, Box 4
- Medium: Line 1 = Box 1, Line 2 = Box 2, Box 3, Box 4
- Small: Line 1 = Box 1, Line 2 = Box 2, Box 3, Line 3 = Box 4
I have successfully achieved the desired layout for Large, Medium, and Extra Small screen sizes. However, I encountered an issue with the Small screen size (col-sm-). The problem arises when Box #4 starts covering up Box #2 and Box #3. You can view the issue in the following images:
bootstrap grid at lg, md, sm, and xs
When I attempted to uncomment the background-color property, the overlap between Box 4 and the other two boxes became more glaring. Here's a snapshot illustrating the problem:
Box 4 totally covers Box 2 and Box 3
Despite trying to add margins to the div-content class (green border) and padding to [class*="col-"], Box #4 continues to encroach upon the adjacent boxes. Here's the relevant snippet of code:
.container {
border: 3px solid black;
}
.container .row {
border: 3px solid red;
}
.row [class*="col-"] {
border: 3px solid blue;
}
.column-content {
border: 3px solid green;
margin: 10px;
/*background-color: #ffbe5d;*/
}
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-3 col-md-12 col-sm-12 col-xs-12">
<div class="column-content">Box 1</div>
</div>
<div class="col-xl-6 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="column-content">Box 2</div>
</div>
<div class="col-xl-6 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="column-content">Box 3</div>
</div>
<div class="col-xl-6 col-lg-3 col-md-4 col-sm-12 col-xs-12">
<div class="column-content">Box 4</div>
</div>
</div>
</div>If anyone could shed some light on why this issue occurs and offer suggestions to rectify it, I would greatly appreciate it. Thank you in advance!