How to Avoid Empty Vertical Space Between Columns in Bootstrap 4?

Empty Vertical Space Between Columns in Bootstrap 4

Bootstrap 4 introduces flexbox, resulting in columns sharing the same height as the tallest column. This creates an undesirable empty space between columns in certain scenarios.

Flexbox Alignment and Empty Space

Consider this:

• Column A: Description (Tall)
• Column B: Sidebar (Short)
• Column C: Comments (Tall)

Flexbox aligns columns vertically, resulting in:

------------------  ---------
|                  ||         |
|                  ||         |
------------------ |         |
------------------ |         |
|                  ||         |
------------------  ---------

But we desire:

------------------  ---------
|                  |
 ------------------  
|                  |
 ------------------ |         |
|                  ||         |
 -------------------  ---------

Floats as a Workaround

Bootstrap 3 used floats, which allows columns to float and take up only the space they need. To achieve this in Bootstrap 4:

<div>
<p>The d-lg-block class forces display:block on the row, allowing columns to float on large screens.</p>
<p><strong>Nesting and Order Preservation</strong></p>
<p>Nesting columns as follows may seem like a solution:</p>
<pre class="brush:php;toolbar:false"><div><p>However, this compromises column order. In the above example, the sidebar will appear last on small screens due to the automatic layout of nested rows.</p></div>