I have a dynamic set of elements that need to be inserted into a page, with some elements being labeled as "small" and others as "big". The challenge is that I do not know in advance the quantity or order of these elements.
- If an element is labeled "small", it should occupy a large
col-4. - If an element is labeled "big", it should take up as much space as possible within its row, extending from the previous element to the end of the row.
This means that a "big" element could potentially occupy a col-4, col-8, or col-12 size based on its position within the layout. Take a look at this visual representation:
https://i.sstatic.net/X4Uwb.png
The closest question I found on Stack Overflow regarding this issue is: Bootstrap fill remaining columns
I attempted to apply the solution proposed in that question, but it fails when there's a "small" element following a "big" element within the same row. To borrow phrasing from the linked post:
it does not cover the case when, in the same row, you have a blue element after a rogue element
.col-4{
background:red;
}
.big{
background:yellow;
}
.row{
background:white;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e8848988929592928796a6d3c8d6c8d6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h1>
Expected result
</h1>
The goal is to obtain this same behaviour using the same style for every "big" element
<div class="container-fluid pt-2">
<div class="row">
<div class="col-4 mb-1">
small
</div>
<div class="col-4 mb-1">
small
</div>
<div class="col-4 mb-1">
small
</div>
<div class="col-12 big mb-1">
big
</div>
<div class="col-4 mb-1">
small
</div>
<div class="col-4 mb-1">
small
</div>
<div class="col-4 big mb-1">
big
</div>
<div class="col-4 mb-1">
small
</div>
<div class="col-8 big mb-1">
big
</div>
<div class="col-4 mb-1">
small
</div>
</div>
</div>
<h1>
Not working attempt 1 (don't use any col)
</h1>
Issue: The "big" elements start on a new row instead of filling the previous row.
...TRUNCATED...
https://jsfiddle.net/bhLq86o4/
How can I assign the same class to all the "big" elements so that the final layout resembles the examples provided?