How to Fill Remaining Height with a Row in Bootstrap 4?

Bootstrap 4: Filling Remaining Height with a Row

Achieving a row that spans the remaining available height in Bootstrap 4 can be challenging, but it's possible. Let's explore how to accomplish this using the flex-grow-1 class.

Current Issue and Cause

In your provided code, you're using h-100 to set the height of both the row and the nested column. However, this approach creates white space at the bottom of the screen because the nested column (with the blue row) is expanding within the parent column.

Solution: Utilizing flex-grow-1

Bootstrap 4.1 introduced the flex-grow-1 class, which assigns an intrinsic size of 0 to the element, and then grows it to fill any remaining space. In this case, we'll apply it to the row that needs to stretch.

Revised Code

Here's the revised code snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<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>Explanation</strong></p>
<p>In the revised code:</p>
<ul>
<li>The parent column (with the red background) has its height set to 100% using h-100.</li>
<li>The nested column is wrapped in a div with the d-flex flex-column classes, which arranges its children into a vertical column and allows them to grow within the available height.</li>
<li>The second row (with the blue background) now has the flex-grow-1 class applied to it. This instructs the row to expand and fill any remaining height within its parent column.</li>
</ul>
<p>As a result, the blue row now extends to occupy all the unused space within the red column, achieving the desired effect of filling the remaining height.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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