bootstrap 4 h-100 column won't stack properly when screen is resized

Question

I have a problem with bootstrap 4 when using the h-50 and h-100 helper class and rows using columns of different breakpoints.

Take the following example :

<style>
    html,body {
        height: 100%;
    }

    .red{
        background-color: red;
    }

    .green{
        background-color: green;
    }

    .blue{
        background-color: blue;
    }

    .purple{
        background-color: purple;
    }

</style>

xs
<section class="h-50 container-fluid">
    <div class="row h-100 header_content_row purple">
        <div class="col-4 h-100 red">
            foo
        </div>
        <div class="col-4 h-100 green">
            bar
        </div>
        <div class="col-4 h-100 blue">
            whiz
        </div>
    </div>
</section>

sm
<section class="h-50 container-fluid">
    <div class="row h-100 header_content_row purple">
        <div class="col-sm-4 h-100 red">
            foo
        </div>
        <div class="col-sm-4 h-100 green">
            bar
        </div>
        <div class="col-sm-4 h-100 blue">
            whiz
        </div>
    </div>
</section>

md
<section class="h-50 container-fluid">
    <div class="row h-100 header_content_row purple">
        <div class="col-md-4 h-100 red">whiz
        </div>
        <div class="col-md-4 h-100 green">bar
        </div>
        <div class="col-md-4 h-100 blue">foo
        </div>
    </div>
</section>

Notice that on a computer screen in full screen the rows and columns display properly with a full height BUT when resizing the screen to a smaller size the seccond section partly disappears behind the third.

Is this a bug ? How can this be avoided?

edit : this demo from isherwood shows the problem Thanks

The code you posted doesn't repro what you describe. Is there other CSS? — Carol Skelly, Mar 14 '18 at 10:53
I added the contents of style tag. Could it be the 100% height of body that is doing this? From my understanding it is necessary for h-100 to work properly... — azpublic, Mar 14 '18 at 13:41
Does [this demo](http://jsfiddle.net/3pa4h3kc/2) show the problem? — isherwood, Mar 14 '18 at 13:45
@isherwood actually yes your demo shows the problem. Notice how the second section slips under the third when you resize the window to a narrow enough size that all 3 sections should have their columns stacked on top of each other. — azpublic, Mar 14 '18 at 13:54
@ZimSystem I'm trying to have bootstrap 4 behave the expected way by stacking columns on top of each other when the window is too narrow, even when using the h-100 class to have full window height columns. — azpublic, Mar 14 '18 at 13:55

Carol Skelly · Accepted Answer · 2018-03-14T15:03:25.110

You just need to take the h-100 off the inner columns.

https://www.codeply.com/go/C32tIprxQr

<section class="h-50 container-fluid">
  <div class="row h-100 header_content_row purple">
    <div class="col-4 red">
      foo
    </div>
    <div class="col-4 green">
      bar
    </div>
    <div class="col-4 blue">
      whiz
    </div>
  </div>
</section>

sm
<section class="h-50 container-fluid">
  <div class="row h-100 header_content_row purple">
    <div class="col-sm-4 red">
      foo
    </div>
    <div class="col-sm-4 green">
      bar
    </div>
    <div class="col-sm-4 blue">
      whiz
    </div>
  </div>
</section>

md
<section class="h-50 container-fluid">
  <div class="row h-100 header_content_row purple">
    <div class="col-md-4 red">whiz
    </div>
    <div class="col-md-4 green">bar
    </div>
    <div class="col-md-4 blue">foo
    </div>
  </div>
</section>

The Bootstrap 4 row is display:flex so the cols will fill height. Also, this answer explains more how percentage heights work.

Thanks! That did the trick interestingly. I don't understand why though ... :) — azpublic, Mar 14 '18 at 15:02

bootstrap 4 h-100 column won't stack properly when screen is resized

1 Answers1