Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4, how to make a col have a height of 100%?

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>
like image 843
AnnaSm Avatar asked Jul 08 '17 04:07

AnnaSm


People also ask

How do I make Bootstrap 4 columns equal height?

You just have to use class="row-eq-height" with your class="row" to get equal height columns for previous bootstrap versions.

How can I make Div 100 page height?

With the advent of the CSS flex model, solving the 100% height problem becomes very, very easy: use height: 100%; display: flex on the parent, and flex: 1 on the child elements. They'll automatically take up all the available space in their container.


3 Answers

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?

like image 132
Zim Avatar answered Oct 16 '22 21:10

Zim


Use bootstrap class vh-100

for exp:

   <div class="vh-100">
       <p> Full Height </p>
   </div>
like image 22
Sandeep Sherpur Avatar answered Oct 16 '22 21:10

Sandeep Sherpur


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.

like image 10
Derrick Miller Avatar answered Oct 16 '22 21:10

Derrick Miller