teelou teelou - 2 months ago 7
CSS Question

Bootstrap grid system - how to make two columns with equal height?

How can I make two columns having the same height in Bootstrap grid columns?



.item-text {
padding: 30px !important;
/* Flex center. */
display: flex;
align-items: center;
vertical-align: middle;
justify-content: center;
border: 1px solid blue !important;
}
.item-text .item-center {
align-self: center;
margin: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xl-4 col-lg-6 col-sm-12">
<div class="col-sm-6">
<img src="http://placehold.it/400x600" class="img-responsive" alt="" />
</div>
<div class="col-sm-6 item-text">
<div class="item-center">
<h3 class="heading item-heading">(Title) Ways of Something</h3>
<p class="item-contributor">John Berger</p>
<p class="item-description">(Short description) Remix-remake of John Berger’s 1972 BBC documentary, Ways of Seeing</p>
</div>
</div>
</div>





Result:

enter image description here

Any ideas how to make the right column's height equal as the left one?

Answer

Try this:

Check Demo HERE

HTML:

<div class="row row-height">

  <div class="col-sm-6">
    <img src="http://placehold.it/400x600" class="img-responsive" alt="" />
  </div>
  <div class="col-sm-6 item-text">
    <div class="item-center">
      <h3 class="heading item-heading">(Title) Ways of Something</h3>
      <p class="item-contributor">John Berger</p>
      <p class="item-description">(Short description) Remix-remake of John Berger’s 1972 BBC documentary, Ways of Seeing</p>
    </div>
  </div>

</div>

CSS:

.row-height {
  display: flex;
}

.item-text {
  padding: 30px !important;
  /* Flex center. */
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  border: 1px solid blue !important;
}

.item-text .item-center {
  /*  align-self: center;
    margin: auto; */
}