How to Fill Remaining Height of a Bootstrap 4 Row with Flexbox?

How to Fill Remaining Height of a Bootstrap 4 Row

Enlarge a row to take up the remaining screen space can be achieved using Bootstrap 4. To accomplish this, avoid adding h-100 to the row class to prevent extra whitespace. Instead, utilize the flex-grow-1 class, as illustrated below:

<br>html, body {<pre class="brush:php;toolbar:false">height: 100%;

}

.container-fluid {

height: 100%;

}

.row {

justify-content-center;
height: 100%;

}

.col-4 {

background: rgb(196, 50, 53);

}

.col-8 {

background: rgb(74, 74, 74);

}

.bg-purple {

background: rgb(48, 0, 50);

}

.bg-blue {

background: rgb(50, 101, 196);
flex-grow: 1;

}

Within the red column, nest another column with a vertical flexbox using d-flex and flex-column. One row is assigned a fixed height (e.g., 150px), while the other is assigned flex-grow-1, which ensures it expands to fill the remaining space. Finally, include the text-white class for white text on the colorful backgrounds.

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