Twitter bootstrap 4 two columns full height without scroll

Question

I'm trying to make two-column full-height layout with bootstrap 4. What I want to do is:

  +-------------------------------------------------+
  | Logo                Header          Another Logo| - height 10 %
  +----------------------------------+--------------+                 -
  |                                  |   Content 2  | - height 10 %    |
  |                                  |--------------|                  |
  |                                  |              |                  |
  |                                  |     width    |                  |
  |    Content 1 - width 70%         |      30%     | - height 60%     | - height total 90%
  |                                  |   Content 3  |                  |
  |                                  |              |                  |
  |                                  +--------------+                  |
  |                                  |   Content 4  | - height 20%     |
  +----------------------------------+--------------+                 -

All the contents should be visible in screen without scrolling. I want to squeeze or extent the widths and heights according to resolution. That means i strictly want to avoid scrolling.

Note: this design is only for desktop view i.e. width > 768 px. So no need to think about mobile view.

Answer 1

That's all you need from Bootstrap 4 classes in this case

html, body, .project {height: 100%}
* {box-sizing: border-box}
.project div {border:1px solid #eee}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="project text-center">
    <div class="d-flex justify-content-between" style="height: 10%">
        <div>logo</div>
        <div>Header</div>
        <div>Another logo</div>
    </div>

    <div class="d-flex" style="height:90%">
        <div class="mb-auto mt-auto" style="min-width:70%;">Content 1 - width 70% - Always center at horizontal and vertical</div>
        <div class="d-flex flex-column" style="min-width:30%;">
            <div class="mb-auto" style="height:10%">Content 2 - height 10%</div>
            <div style="height:60%">Content 3 - width 30% - height 60%</div>
            <div class="mt-auto" style="height:20%">Content 4 - height 20%</div>
        </div>
    </div>

</div>