Bootstrap 4, How To Make A Col Have A Height Of 100%?

Answer :

Use the Bootstrap 4 h-100 class for height:100%;

<div class="container-fluid h-100">   <div class="row justify-content-center h-100">     <div class="col-4 hidden-md-down" id="yellow">       XXXX     </div>     <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">       Form Goes Here     </div>   </div> </div> 

https://www.codeply.com/go/zxd6oN1yWp

You'll also need ensure any parent(s) are also 100% height (or have a defined height)...

html,body {   height: 100%; } 

Note: 100% height is not the same as "remaining" height.

---

Related: Bootstrap 4: How to make the row stretch remaining height?

Use bootstrap class vh-100 for exp:

<div class="vh-100"> 

I have tried over a half-dozen solutions suggested on Stack Overflow, and the only thing that worked for me was this:

<div class="row" style="display: flex; flex-wrap: wrap">     <div class="col-md-6">         Column A     </div>     <div class="col-md-6">         Column B     </div> </div> 

I got the solution from https://codepen.io/ondrejsvestka/pen/gWPpPo

Note that it seems to affect the column margins. I had to apply adjustments to those.