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.

The above is the detailed content of How to Eliminate Vertical Space Between Columns in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!