Bootstrap: How to make a simple full height layout?

Question

I'm trying to make this layout in bootstrap

--------------------------------------------
|                                          |
|                                          |
--------------------------------------------
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
|      |                                   |
--------------------------------------------

An important part is that the top section take up the larger of 96px and 20% of the screen and the bottom part should take up the rest of the screen.

While the grid system has given me great power in manipulating the column widths, I'm having trouble finding how to do the same with the row heights.

Here is my current structure:

<div class="container-fluid" style="height: 100vh">
    <div class="row">
        <div class="col">
            Top Bar
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            Bottom Left
        </div>
        <div class="col-md-10">
            Bottom Right
        </div>
    </div>
</div>

And it looks like this:

--------------------------------------------
|                                          |
|                                          |
--------------------------------------------
|      |                                   |
|      |                                   |
--------------------------------------------

Which looks okay on a phone, but completely squished on a desktop.

I've gotten some hacky success by setting the second row div to height = 80% but I'm sure there's a better way.

Carol Skelly · Accepted Answer · 2022-01-07T18:22:16.663

33

Percentage heights aren't the best option. Instead, make the container a flexbox column (d-flex flex-column) and then use grow (flex-grow-1) on the row that you want to fill the remaining height...

https://codeply.com/go/jCIuhHCvHW

<div class="container-fluid min-vh-100 d-flex flex-column">
    <div class="row">
        <div class="col">
            Top Bar
        </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-md-2 border">
            Bottom Left
        </div>
        <div class="col-md-10 border">
            Bottom Right
        </div>
    </div>
</div>

Also see: How to make the row stretch remaining height

edited Jan 07 '22 at 18:22

answered Aug 19 '19 at 13:27

Carol Skelly

351,302
90
710
624

It looks great in your link, for some reason I've lost the top bar with your code and now it's just three columns. Edit: when I just use your code it looks fine too, I'll reconstruct my original webpage one tag at a time with your code as a template until something breaks. Thanks for the help! – CSStudent7782 Aug 19 '19 at 13:50

score 0 · Answer 2 · answered Aug 19 '19 at 13:31

HTML:

<div class="container-fluid" style="height: 100vh">
    <div class="row top-bar">
        <div class="col">
            Top Bar
        </div>
    </div>
    <div class="row bottom-part">
        <div class="col-md-2">
            Bottom Left
        </div>
        <div class="col-md-10">
            Bottom Right
        </div>
    </div>
</div>

CSS:

.top-bar {
    height: max(96px, 20%);
}

.bottom-part {
    height: calc(100% - max(96px, 20%));
}

Explanation: The CSS max function calculates the maximum of several given values. The bottom part uses the CSS calc function to calculate the height of 100 percent minus the height of the top bar, resulting in the correct height.

score 0 · Answer 3 · answered Nov 01 '22 at 17:34

0

You should be able to achieve it using vh in your styles/css:

<div class="container-fluid">
    <div class="row" style="height:20vh;">
        ...
    </div>
    <div class="row" style="height:80vh;">
        ...
    </div>
</div>

answered Nov 01 '22 at 17:34

Nata

986
9
4

score -1 · Answer 4 · answered Aug 19 '19 at 13:24

Have you tried the h- sizing helper classes in Bootstrap?

See: https://getbootstrap.com/docs/4.0/utilities/sizing/

For example:

<div class="container-fluid" style="height: 100vw;">
  <div class="row h-20">
    <div class="col"> Top Bar </div>
  </div>
  <div class="row h-80">
    <div class="col-md-2"> Bottom Left </div>
    <div class="col-md-10"> Bottom Right </div>
  </div>       
</div>

Bootstrap: How to make a simple full height layout?

4 Answers4