Is it possible for Bootstrap 5 to create responsive layouts with draggable vertical borders between two columns? The answer is Yes, by adjusting Bootstrap to use container queries instead of media queries. Major browsers have supported container queries since Feb 2023.
Background: Two divs are positioned next to each other as columns, with a draggable divider in between. For example, the left div has the CSS property resize
set to horizontal
, while the right div uses the Bootstrap class flex-grow-1
. Users can then drag the divider left or right.
Desired outcome: Bootstrap's grid tiers within the column divs should be determined by the individual widths of the divs, not just the viewport width.
Illustration (all gray divs have
class="col-sm-12 col-md-6 col-lg 4"
):
https://i.sstatic.net/MXCnR.png
When using classes like col-sm-12 col-md-6 col-lg 4
in Bootstrap, how can logic be added to "measurements based on the parent div" or "div with id #X" most effectively?