Bootstrap 4 Two Columns Full Height

Question

This is an enhancement to this question.

I'm just racking my brain on how to accomplish the layout below in bootstrap 4. The main thing I need are col 1, col 2, and col3 need to go to the bottom of their respective row. They need to be nested columns but bootstrap 4 it doesn't seem to fill the parent row height. Please help. Here's a CodePen as an example. I want the red color in the codepen to cover the yellow. Thanks in advance.

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |                        | COL 1 | COL 1 | COL 3  |
  |       Navigation       |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  |                        |       |       |        |
  +------------+------------------------------------+

score 6 · Accepted Answer · answered Feb 01 '18 at 04:45

The only thing you need in this case is to add the h-100 class (height:100%) to the row.

Here's the working code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    .container {
        background: green;
    }

    .col-md-3 {   
        background: pink;
    }
    .col-md-9 {
        background: yellow;   
    }
    .col-md-4 {
        background: red;
    }
</style>

<div class="container">
   header
    <div class="row">
        <div class="col-md-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </div>
        <div class="col-md-9">
            <div class="row h-100">
                <div class="col-md-4">col2 - 1</div>
                <div class="col-md-4">col2 - 2</div>
                <div class="col-md-4">col2 - 3</div>
            </div>
            col2
        </div>
    </div>
</div>

Bootstrap 4 Two Columns Full Height

1 Answers1