I am trying to vertically align Bootstrap col-md* columns. I have two blocks, one with text and one with an image, and I want them to be equal in height with the text block vertically centered. My current solution is not working correctly. Can someone please help me?
HTML
<div class="row">
<div class="col-md-6">
<div class="some-text">Some text</div>
</div>
<div class="col-md-6">
<div class="some-img"><img src="..." width="100%"></div>
</div>
</div>
CSS
.some-text {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
JS
$('.some-text').each(function() {
var newH = 0;
$(this).parent().siblings().each(function() {
if ($(this).height() > newH)
{
newH = $(this).height();
}
});
$(this).parent().css('height', newH);
});