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

Question

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:

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

Have you tried: http://getbootstrap.com.vn/examples/equal-height-columns/ ? - Nice font by the way — Yates, Sep 30 '16 at 07:28
You need to actually add the CSS to your code. It's not in the original Bootstrap. I posted an answer. — Yates, Sep 30 '16 at 07:57

score 3 · Answer 1 · answered Sep 30 '16 at 07:57

3

Add the following code to your CSS:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Then use that class on the row you want the column to have an equal height:

<div class="row row-eq-height">
    <div class="col-lg-6"></div>
    <div class="col-lg-6"></div>
</div>

That's it. This is the cleanest and more official way of doing it.

answered Sep 30 '16 at 07:57

Yates

532
7
23

using this solution gives extra space in both the child divs. Any idea how to remove this? – Aalind Sharma Sep 30 '16 at 08:03
@AalindSharma could you provide a Snippet or a screenshot? I do not know what you mean. – Yates Sep 30 '16 at 08:06
This style would interfere with smaller resolutions, meaning the cols will not go one of eachother in mobile resolution. – Bogdan C Jan 27 '18 at 20:49
@media (min-width: 768px) { .row-eq-height { display: flex; flex-wrap: wrap; } } – Bogdan C Jan 27 '18 at 20:54

score 1 · Accepted Answer · answered Sep 30 '16 at 07:38

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; */
}

some extra space is coming in the image div, in this solution. Is it possible to remove that space ? — Aalind Sharma, Sep 30 '16 at 07:49

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

2 Answers2

Linked