I hope today is a day full of blessings for all of you.
I tell you friends that I am taking Bootstrap classes and as a personal challenge I want to achieve this design.
Where the yellow containers would be the "invisible columns" , which I am handling with the .d-none class that hides them.
The top gray bins are the same width.
I think I'm very close to it but for some reason my code doesn't look like the image. What faults do I have? Is this the correct way to do it? How would you put the gray blocks together?
This is my code:
.caja{
height: 50px;
border-radius: 3rem;
margin-top: 5px;
margin-bottom: 5px;
}
.gris{
background: grey;
}
.ylw{
background: yellow;
}
<div class="container">
<div class="row">
<div class="col-md-3 caja gris"></div>
<div class="col-md-3 caja gris"></div>
<div class="col-md-3 caja gris"></div>
<div class="col-md-3 caja gris"></div>
<div class="col-md-3 caja ylw d-none"></div>
<div class="col-md-3 caja gris"></div>
<div class="col-md-3 caja gris"></div>
<div class="col-md-3 caja ylw d-none"></div>
<div class="col-md-3 caja gris"></div>
<div class="col-md-3 caja ylw d-none"></div>
<div class="col-md-3 caja gris"></div>
<div class="col-md-3 caja gris"></div>
<div class="col-md-3 caja ylw d-none"></div>
<div class="col-md-3 caja ylw d-none"></div>
<div class="col-md-3 caja ylw d-none"></div>
<div class="col-md-3 caja gris"></div>
</div>
</div>
Thank you very much brothers!
Using bootstrap it should be like this
I did it here, I hope it helps you :D
codepen.io test with buttons to show/hide yellow columns: https://codepen.io/PatrickDyD/full/mgbpQe
Starting if you want the divs that you have hidden with d-none to be seen as in the image, you have to remove them, some logic.
And thinking that bootstrap the grid has 12 elements where you see how you group them, an answer would be this
Thinking that you want these boxes to look like in the picture