How to Make a Bootstrap 4 Row Expand to Fill Remaining Height?

Bootstrap 4 - Expanding Row to Fill Remaining Height

In this article, we will explore how to expand a row to fill the remaining height using Bootstrap 4.

Problem:

You may encounter a situation where you want a row to stretch to occupy the rest of the available height. Despite attempts to use the h-100 class, excessive whitespace appears at the bottom of the screen.

Solution: Bootstrap 4.1 flex-grow-1 Class

Bootstrap 4.1 introduces the flex-grow-1 class, which allows an element to expand to fill the remaining space within its parent container. By utilizing this class, we can achieve our desired result.

Here's the revised code snippet:

<br>html,body{height:100%;}</p>
<p>.bg-purple {<br>  background: rgb(48,0,50);<br>}<br>.bg-gray {<br>  background: rgb(74,74,74);<br>}<br>.bg-blue {<br>  background: rgb(50,101,196);<br>}<br>.bg-red {<br>  background: rgb(196,50,53);<br>}  </p>
<p><div>  <div class="row justify-content-center h-100"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>