How to create Bootstrap columns of the same height (the height of the left one)

Question

I have checked several answers on this topic, but they are either not responsive or just don't work for me.

I have two columns and I would like the right one to always match the height of the left one. If there is too much content in the right column, make it scrollable. Is that possible?

Answer 1

I have one example for you (using table layout):

HTML:

<div class="row no-gutter">
  <div class="row-same-height">
    <div class="col-xs-6 col-xs-height">
      <div class="content-left">
        <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="img-responsive">
      </div>
    </div>
    <div class="col-xs-6 col-xs-height col-top">
      <div class="content-right">
        <div class="content-box">
          <h2>Responsive two sections (equal height)</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </div>
    </div>
  </div>
</div>

CSS:

.no-gutter.row {
  margin-left: 0;
  margin-right: 0;
}
.no-gutter > [class*="col-"],
.no-gutter .row-same-height > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
@media (min-width: 992px) {
  .no-gutter-desktop.row {
    margin-left: 0;
    margin-right: 0;
  }
  .no-gutter-desktop > [class*="col-"],
  .no-gutter .row-same-height > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
.inside {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
  background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
  background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
}
.inside-full-height {
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.content {
  padding: 12px 3px;
}
.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}

.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}
@media (min-width: 480px) {
  .row-xs-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-xs-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-xs-top {
    vertical-align: top;
  }
  .col-xs-middle {
    vertical-align: middle;
  }
  .col-xs-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 768px) {
  .row-sm-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-sm-top {
    vertical-align: top;
  }
  .col-sm-middle {
    vertical-align: middle;
  }
  .col-sm-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 992px) {
  .row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-md-top {
    vertical-align: top;
  }
  .col-md-middle {
    vertical-align: middle;
  }
  .col-md-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 1200px) {
  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-lg-top {
    vertical-align: top;
  }
  .col-lg-middle {
    vertical-align: middle;
  }
  .col-lg-bottom {
    vertical-align: bottom;
  }
}
[class*="col-"] {
  background: #d6ec94;
}
.content-right {
  overflow-y: auto;
}

JS:

var leftHeight = $('.content-left').height();
$('.right').css('max-height', leftHeight);

$(window).resize(function () {
  var leftHeight = $('.content-left').height();
  $('.content-right').css('max-height', leftHeight);
});

CODEPEN