How can I make Bootstrap 4 columns 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:

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

I'm assuming you've specified this somewhere: `
`? – ganders Jul 19 '17 at 13:08 — ganders, Jul 19 '17 at 13:08

Zim · Accepted Answer · 2018-04-28T10:54:02.803

87

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?

edited Apr 28 '18 at 10:54

answered Jul 08 '17 at 10:51

Zim

329,487
83
671
600

1

This doesn't work if the content in the col is bigger than 100% height - like long forms. – BvuRVKyUVlViVIc7 Apr 01 '19 at 15:18
Yeah, in that case you'd use min-height instead: https://www.codeply.com/go/MjGkqFWmA1 – Zim Apr 01 '19 at 15:43
Instead to edit the css file, add `` and `` – cespon Aug 18 '19 at 11:39
@Zim, In case, if I have more than 3 parents then I have to add h-100 class to all the parents? – user9437856 Feb 21 '21 at 17:53

Sandeep Sherpur · Answer 2 · 2021-10-07T07:33:24.527

21

Use bootstrap class vh-100

for exp:

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

edited Oct 07 '21 at 07:33

answered Jun 18 '20 at 14:46

Sandeep Sherpur

1,888
20
22

score 9 · Answer 3 · answered Oct 26 '18 at 02:22

9

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.

answered Oct 26 '18 at 02:22

Derrick Miller

1,702
2
20
34

Unfortunately, I just discovered that this causes the columns to stack vertically in Safari. Leaving this here in case someone knows how to fix that. – Derrick Miller Nov 06 '18 at 23:18
1

wouldn't that just be caused by the `flex-wrap: wrap` ? Basically means if the screen doesn't have the real-estate to put them together, it'll wrap to the next line, making it below instead of beside. – T1960CT Apr 30 '19 at 19:18

score 1 · Answer 4 · answered Sep 15 '19 at 14:38

I solved this like this:

    <section className="container-fluid">
            <div className="row justify-content-center">

                <article className="d-flex flex-column justify-content-center align-items-center vh-100">
                        <!-- content -->
                </article>

            </div>
    </section>

score 1 · Answer 5 · answered Mar 24 '20 at 08:17

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

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">

    <div class="col-4 hidden-md-down flex-fill" id="yellow">
      XXXX
    </div>

    <div id="blue" class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100">
      Form Goes Here
    </div>

    <div id="green" class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100">
      Another form
    </div>
  </div>
</div>

score 0 · Answer 6 · edited Jul 25 '18 at 07:22

Set display: table for parent div and display: table-cell for children divs

HTML :

<div class="container-fluid">
  <div class="row justify-content-center display-as-table">

    <div class="col-4 hidden-md-down" id="yellow">
      XXXX<br />
      XXXX<br />
      XXXX<br />
      XXXX<br />
      XXXX<br />
      XXXX<br />vv
      XXXX<br />
    </div>

    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8" id="red">
      Form Goes Here
    </div>
  </div>
</div>

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 > div {display: table-cell; float: none;}

How can I make Bootstrap 4 columns have a height of 100%?

6 Answers6

Linked

Related