CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
CSStudent7782
CSStudent7782

Reputation: 658

Bootstrap: How to make a simple full height layout?

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.

Upvotes: 21

Views: 27976

Answers (4)

Nata
Nata

Reputation: 1194

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>

Upvotes: -1

Carol Skelly
Carol Skelly

Reputation: 362630

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

Upvotes: 40

SparkFountain
SparkFountain

Reputation: 2270

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.

Upvotes: 0

NatusPella
NatusPella

Reputation: 1

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>

Upvotes: -1

Related Questions