When working with Bootstrap 4, I encountered an issue where the equal number of split (.col) elements would not move to the next line after any number of columns. To address this, Bootstrap recommends using the (.w-100) class.
While this solution does work, there is a downside - the invisible div used ends up affecting the vertical spacing of the elements, making them appear as though they are taking up space along the vertical axis.
An example illustrating this issue can be seen below.
.wrapper
{
background: lightgray;
height: 100vh;
}
.col
{
background: green;
box-shadow: inset 0 0 0 2px white;
}
.w-100
{
background: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="wrapper">
<div class="row" style="height: 100%">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="w-100">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
The area highlighted with the red background indicates a divider and should not have any physical presence, allowing the green elements on two separate lines to spread equally, in a volume of 2.
The challenge here is that the use of the divider (.w-100) element after any number of items (.col) needs to be dynamic.
This is why I am exploring this approach. If there was a set number of columns (.col-0 ... 12), the issue could be easily resolved by leveraging their properties.
Is there a workaround for removing the impact of the red element in flex propagation?
I attempted to set the height of the divider element to 0, but even without its own height, the elements were still not divided into 2 equal sections. An example is provided below.
.wrapper
{
background: lightgray;
height: 100vh;
}
.col
{
background: green;
box-shadow: inset 0 0 0 2px white;
}
.w-100
{
background: red;
height: 0 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="wrapper">
<div class="row" style="height: 100%">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="w-100">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
Do you believe this issue to be a bug in Bootstrap?