2

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%;
}
max
  • 8,632
  • 3
  • 21
  • 55

2 Answers2

10

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
1

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

pritesh agrawal
  • 1,155
  • 8
  • 16
  • Strange , I added this class , made some changes to your codepen and could seethe updated equal height ( I had similar issue , and that have i resolved so i am pretty sure this should fix this ). – pritesh agrawal Nov 28 '17 at 03:06
  • I added that class to all `col-4` divs and didn't see any change. – max Nov 28 '17 at 03:10
  • I am trying to embed the codepen , but could not add it , anyways , This is what all i changed : 1. changed from col-4 to col ( as you have 6 columns , just to make them equal width ) 2. added this class "align-items-stretch" 3. Added some color (use your inner class) , so that i could see them with equal width 4. added mr-1 for margin between columns. – pritesh agrawal Nov 28 '17 at 03:13
  • You can just fork my Codepen, make changes, save and paste a link :) – max Nov 28 '17 at 03:22
  • check this link , i have changed the section under basic bootsrapt HTML : https://codepen.io/pritesha/pen/pdOVYy – pritesh agrawal Nov 28 '17 at 03:34
  • Ah ok I see, thanks for your work but I'm looking for something different. 1. I want to use `col-x` classes so in case of `col-4` - 4th column wraps to a new row. 2. I want default Bootstrap gaps (30px). 3. As you can see the background in you example is not properly aligned to "Basic Bootstrap HTML" heading. – max Nov 28 '17 at 03:40