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

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

Use bootstrap class vh-100 for exp   lt div class  quot vh-100 quot  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

Although it is not a good solution but may solve your problem  You need to use position absolute in  yellow element    x000D   x000D   yellow  height  100   background  yellow  position  absolute  top  0px  left  0px   x000D   container-fluid  position  static  important   x000D   lt 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  gt  x000D   lt div class  container-fluid  gt  x000D     lt div class  row justify-content-center  gt  x000D   x000D       lt div class  col-4  id  yellow  gt  x000D        XXXX x000D       lt  div gt  x000D   x000D       lt div class  col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8  gt  x000D        Form Goes Here x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt script src  https   code jquery com jquery-3 1 1 slim min js  integrity  sha384-A7FZj7v d sdmMqp nOQwliLvUsJfDHW k9Omg a EheAdgtzNs3hpfag6Ed950n  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js  integrity  sha384-DztdAPBWPRXSA 3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js  integrity  sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   x000D

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

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

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

[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