Bootstrap grid system - how to make two columns with equal height? [duplicate] - css

Question

This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 6 years ago.
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?

Answer 1

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.

Answer 2

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