How to Eliminate Vertical Space Between Columns in Bootstrap 4?

Eliminating Vertical Space Between Columns in Bootstrap 4

Problem Statement:

In Bootstrap 4, when using a two-column layout, an empty vertical space appears between the columns when the viewport is not in "mobile mode".

Cause:

Bootstrap 4 utilizes flexbox, which aligns the height of all columns to match the tallest one.

Proposed Solution: Using Floats

To avoid the empty space, consider using floats instead:

<div class="container">
  <div class="row d-lg-block">
    <div class="col-lg-9 float-left description">Desc</div>
    <div class="col-lg-3 float-right sidebar">Sidebar</div>
    <div class="col-lg-9 float-left comments">Comments</div>
  </div>
</div>

Explanation:

• The d-lg-block class sets the display property of the row to block on large viewports, allowing the columns to float.

Additional Notes:

• Nesting columns (
  ) will not achieve the desired column order in this case.
• For reference, the related topic "Bootstrap with different order on mobile version" discusses a similar issue.