CSS grid layout with Bootstrap's own rows and columns?

Hi there,

please take a look at this code example:

Above a width of 576 px, I have two columns, with the right container 2 (blue) spanning the height of the two left containers.

Below a width of 576 px, I have a single column layout, with container 3 (orange) now occupying the second position.

My question: Is it possible to create this layout with Bootstrap’s own rows and columns? I know that it is very easy to adjust the order of the columns, but assigning a span to container 2 in the two-column layout has not worked for me.

I tried with Bootstrap Studio 5.8.1 and Bootstrap 5.0.

Regards,
Felix

You use rows, flexbox, utility classes and a little CSS (if you want the exact same margin widths and colors as you see in your example.)

I created an example for you. Search the online library for “Failix-Layout”

Download it and install it. It will be deleted in 7 days.

1 Like

Thank you so much! I installed it and analyzed it - so the trick is in the nesting of the columns and rows. I did not think of that.

Learned something again … :slight_smile:

That and using flexbox to make the column on the right fill up the full height of the parent container.

The only difference is that in the W3 CSS grid example, the column widths are fully “fluid” based on screen width, whereas Bootstrap’s column widths are “hard” (based on the breakpoints,) but you can use CSS transitions to simulate that same fluid animation effect with Bootstrap.