How can I implement the following grid with Bootstrap?
I would like to be able to use the cols in such a way that I have a large col and several small cols of the same size (e.g. 6,3,3 or 4,2,2,2, etc.) The small cols should be exactly half as high as the large col, so that there is room for two rows of the small cols.
How do I get that cleanly with Bootstrap? All my attempts have brought no success.
<div class="container">
<div class="row">
<div class="col-md-6">html for main block here</div>
<div class="col-md-6">
<div class="row row-cols-2 gy-3">
<div class="col">html for small block here</div>
<div class="col">html for small block here</div>
<div class="col">html for small block here</div>
<div class="col">html for small block here</div>
</div>
</div>
</div>
</div>
you would have to play around with the alignment, but this gives you the rough framework
yes, but you might find it easier in the long run to turn off the row gutters and add to the individual blocks. chances are you are going to have to put a div in each column to get the styling right, so your code might look something like this: