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 {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
