Bootstrap 4 how to make a col have a height of 100

Question

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    lt div class  container-fluid  gt     lt div class  row justify-content-center  gt        lt div class  col-4 hidden-md-down  id  yellow  gt        XXXX      lt  div gt        lt div class  col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8  gt        Form Goes Here      lt  div gt     lt  div gt   lt  div gt

User · Answer

Although it is not a good solution but may solve your problem. You need to use position absolute in #yellow element!

_x000D_

#yellow {height: 100%; background: yellow; position: absolute; top: 0px; left: 0px;}_x000D_
.container-fluid {position: static !important;}

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">_x000D_
<div class="container-fluid">_x000D_
  <div class="row justify-content-center">_x000D_
_x000D_
    <div class="col-4" id="yellow">_x000D_
      XXXX_x000D_
    </div>_x000D_
_x000D_
    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">_x000D_
      Form Goes Here_x000D_
    </div>_x000D_
  </div>_x000D_
</div>_x000D_
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

_x000D_

User · Answer

I have tried over a half-dozen solutions suggested on Stack Overflow  and the only thing that worked for me was this    lt div class  row  style  display  flex  flex-wrap  wrap  gt       lt div class  col-md-6  gt          Column A      lt  div gt       lt div class  col-md-6  gt          Column B      lt  div gt   lt  div gt    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

User · Answer

Use bootstrap class vh-100 for exp   lt div class  quot vh-100 quot  gt

User · Answer

Set display  table for parent div and display  table-cell for children divs  HTML      lt div class  container-fluid  gt     lt div class  row justify-content-center display-as-table  gt        lt div class  col-4 hidden-md-down  id  yellow  gt        XXXX lt br   gt        XXXX lt br   gt        XXXX lt br   gt        XXXX lt br   gt        XXXX lt br   gt        XXXX lt br   gt vv       XXXX lt br   gt       lt  div gt        lt div class  col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8  id  red  gt        Form Goes Here      lt  div gt     lt  div gt   lt  div gt    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  gt  div  display  table-cell  float  none

User · Answer

I solved this like this        lt section className  container-fluid  gt               lt div className  row justify-content-center  gt                    lt article className  d-flex flex-column justify-content-center align-items-center vh-100  gt                           lt  -- content -- gt                   lt  article gt                lt  div gt       lt  section gt

User · Answer

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   lt div class  container-fluid h-100  gt     lt div class  row justify-content-center h-100  gt        lt div class  col-4 hidden-md-down flex-fill  id  yellow  gt        XXXX      lt  div gt        lt div id  blue  class  col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100  gt        Form Goes Here      lt  div gt        lt div id  green  class  col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100  gt        Another form      lt  div gt     lt  div gt   lt  div gt

User · Answer

Use the Bootstrap 4 h-100 class for height 100     lt div class  container-fluid h-100  gt     lt div class  row justify-content-center h-100  gt       lt div class  col-4 hidden-md-down  id  yellow  gt        XXXX      lt  div gt       lt div class  col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8  gt        Form Goes Here      lt  div gt     lt  div gt   lt  div gt    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

[twitter-bootstrap] Bootstrap 4, how to make a col have a height of 100%?

Examples related to twitter-bootstrap

Examples related to css

Examples related to grid-layout

Examples related to bootstrap-4

Examples related to twitter-bootstrap-4