How to get equal height columns childs in Bootstrap 4?

Question

What I want to achieve:

1. Equal height columns direct childs, so gaps will be visible between columns (first solution in Codepen but it fails on Safari (Mac)).

   or (if that's possible)

2. Equal height Bootstrap columns with visible gaps between them (If I set background color to col class divs - gaps are not visible because of padding - you can see that in Codepen).

What I have tried:

1. Setting h-100 class (height: 100%) to columns direct childs but it fails on Safari (see StackOverflow question).
2. Using horizontal margins on col divs instead of padding but it breaks Bootstrap's grid system.

CODEPEN

HTML:

<div class="container">
  <h3>This is how it should work - fails on Safari (Mac)</h3>
  <div class="row">
    <div class="col-4">
      <div class="inner h-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">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.</div>
    </div>
  </div>
</div>

<div class="container">
  <h3>Backgrounds applied to col divs (gaps are not visible because of cols padding)</h3>
  <div class="row no-gutters">
    <div class="col-4 bg">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4 bg">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4 bg">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4 bg">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4 bg">
      <div class="inner">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.</div>
    </div>
  </div>
</div>

<div class="container">
  <h3>Basic Bootstrap HTML</h3>
  <div class="row">
    <div class="col-4">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">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.</div>
    </div>
  </div>
</div>

CSS:

.inner,
.bg {
  background: #ddd;
}
.h-100 {
  height: 100%;
}

Answer 1

To make i.a. Safari behave, instead of height, use Flexbox all the way.

Add d-flex to the col-4 element and col to the inner.

d-flex adds display: flex and make the inner, based on align-items defaults to stretch, fill its parent, col adds flex: 1 and make it fill the width.

Stack snippet

h3 {
  margin-top: 30px;
}
.col-4 {
  margin-bottom: 30px;
}
.inner {
  background: #ddd;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <h3>This is how it should work - <strike>fails on Safari (Mac)</strike></h3>
  <div class="row">
    <div class="col-4 d-flex">
      <div class="inner col">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4 d-flex">
      <div class="inner col">Inner</div>
    </div>
    <div class="col-4 d-flex">
      <div class="inner col">Inner</div>
    </div>
    <div class="col-4 d-flex">
      <div class="inner col">Inner</div>
    </div>
    <div class="col-4 d-flex">
      <div class="inner col">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.</div>
    </div>
  </div>
</div>

Answer 2

use this class align-items-stretch along with col-4 for all columns you want to have equal height within the row.