How to Make a Bootstrap 4 Row Fill Remaining Height?

Bootstrap 4: Filling Remaining Height in Rows

In Bootstrap 4, creating a row that fully occupies the remaining vertical space can be challenging. By default, adding the h-100 class to the row will not work as intended.

Solution: Flexbox

To make a row stretch to fill the remaining height, utilize the Bootstrap 4.1 flexbox property flex-grow-1. This class allows an element to grow to fill the remaining available space in its container.

Implementation

Here's how to implement the solution:

1. Add container height: Set the height of the container element (container-fluid) to 100%.
2. Nest column within a flexbox column: Wrap the column within a div with the d-flex and flex-column classes.
3. Apply flex-grow-1: Add the flex-grow-1 class to the row that should fill the remaining height.

Example Code

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div>
<p><strong>Result:</strong></p>
<p>The blue row (ROW 2) will now expand to fill the remaining height of the red column.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

The above is the detailed content of How to Make a Bootstrap 4 Row Fill Remaining Height?. For more information, please follow other related articles on the PHP Chinese website!