Bootstrap 4 - Full height

Question

I know there are many threads about this but I tried everything from the other threads and it didn't work.

So I currently have this code right here:

<div class="container-fluid d-flex flex-column" style="height: 100vh;">
  <div class="row d-flex flex-column no-gutters">
    <app-top class="col"></app-top>

    <div class="row flex-row no-gutters" style="margin-top: 38px;">
      <app-left class="col flex-shrink-0"></app-left>

      <div class="col">
        <router-outlet></router-outlet>
      </div>

      <app-right class="col flex-shrink-0"></app-right>
    </div>
  </div>
</div>

The content isn't stretching how I would like it to. There is a Navbar at the top and then there should be three columns, with full height.

You need to use `flex-fill` or `flex-grow-1`: https://www.codeply.com/go/wq0yGMndc8 — Carol Skelly, Aug 09 '18 at 12:31

score 1 · Answer 1 · answered Aug 09 '18 at 11:31

1

Remove styles 100vh from the div and add bootstrap 4 class for 100% height

<div class="h-100"></div>

answered Aug 09 '18 at 11:31

Muhammad Shoaib

48
3

I don't know why you had a negative vote, but this worked perfect for me. So thumbs up for you. – Danielle Sep 26 '21 at 22:37

score 1 · Answer 2 · answered Aug 09 '18 at 11:50

1

This Should Do It. Avoid using inline styles.

<div class="container-fluid h-100">

Similar answer Here: Bootstrap 4, how to make a col have a height of 100%?

answered Aug 09 '18 at 11:50

henk.io

296
1
3
15

Bootstrap 4 - Full height

2 Answers2