Bootstrap 4, how to make a col have a height of 100%?
Twitter BootstrapCssGrid LayoutBootstrap 4Twitter Bootstrap-4Twitter Bootstrap Problem Overview
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>
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
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.
Solution 2 - Twitter Bootstrap
Use bootstrap class vh-100
for exp:
<div class="vh-100">
<p> Full Height </p>
</div>
Solution 3 - Twitter Bootstrap
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.
Solution 4 - Twitter Bootstrap
I solved this like this:
<section className="container-fluid">
<div className="row justify-content-center">
<article className="d-flex flex-column justify-content-center align-items-center vh-100">
<!-- content -->
</article>
</div>
</section>
Solution 5 - Twitter Bootstrap
I came across this problem because my cols exceeded the row grid length (> 12)
A solution using 100% Bootstrap 4:
Since the rows in Bootstrap are already display: flex
You just need to add flex-fill
to the Col, and h-100
to the container and any children.
Pen here: https://codepen.io/joshkopecek/pen/Exjdgjo
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-4 hidden-md-down flex-fill" id="yellow">
XXXX
</div>
<div id="blue" class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100">
Form Goes Here
</div>
<div id="green" class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100">
Another form
</div>
</div>
</div>
Solution 6 - Twitter Bootstrap
Set display: table
for parent div and display: table-cell
for children divs
HTML :
<div class="container-fluid">
<div class="row justify-content-center display-as-table">
<div class="col-4 hidden-md-down" id="yellow">
XXXX<br />
XXXX<br />
XXXX<br />
XXXX<br />
XXXX<br />
XXXX<br />vv
XXXX<br />
</div>
<div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8" id="red">
Form Goes Here
</div>
</div>
</div>
CSS:
#yellow {
height: 100%;
background: yellow;
width: 50%;
}
#red {background: red}
.container-fluid {bacgkround: #ccc}
/* this is the part make equal height */
.display-as-table {display: table; width: 100%;}
.display-as-table > div {display: table-cell; float: none;}