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

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

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

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

Youll 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?

Use bootstrap class vh-100

for exp:

   <div class=vh-100>
       <p> Full Height </p>
   </div>

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

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.

Related posts on CSS  :

Leave a Reply

Your email address will not be published.