how can I make a column take up 100% height of the browser w bootstrap 4?
See the following: https://codepen.io/johnpickly/pen/dRqxjV
Note the yellow div, I need this div/column to take up a height of 100%... Is there way to make this happen without having to make all parent div's have a height of 100%?
Thank you
html:
<div class="container-fluid">
<div class="row justify-content-center">
<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>
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?