CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
azpublic
azpublic

Reputation: 1404

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

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

Upvotes: 3

Views: 4044

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

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.

Upvotes: 3

Related Questions