How to vertically center bootstrap column text? - html

Question

I want to display the text (and if the image is smaller, then the image) in the middle by vertically. But i can't accomplish it. Any help?
Here is what i have right now: Jsfiddle
HTML:
<div class="container overview-sm">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="box2">
<img class="image" src="http://via.placeholder.com/450x450">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="box2">
<h1 class="content-title">Lorem impsum</h1>
<hr>
<p class="content-sub-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet purus ac turpis finibus auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec in dictum arcu, dapibus porta lorem. </p>
</div>
</div>
</div>
</div>
CSS:
.box2 {
margin: 5px 5px 5px 0;
text-align: center;
display: inline-block;
width: 100%;
}
.image{
width: 100%;
max-width: 450px;
}
.row{
padding-bottom: 30px;
}
Image of what i want it to be: Image

Answer 1

The easiest way to do this would be to use Flexbox. Note that older browsers may not have great/any Flexbox support: https://caniuse.com/#search=flexbox)
If you are using Bootstrap 4, its grid uses Flexbox, so the columns in the row should already match each other's height. You can then use Bootstrap 4's Flexbox utility classes to vertically center the column's content: class="d-flex align-items-center". Ex:
<div class="row">
<div class="col d-flex align-items-center">Centered Content</div>
<div class="col">
<ul>
<li>Longer</li>
<li>Multi</li>
<li>Line</li>
<li>Content</li>
</ul>
</div>
</div>
Codepen
If you are using Bootstrap 3, you're going to have to add the appropriate flexbox code to both get your columns to match in height and vertically center your content. Here is a little cheatsheet I find helpful for building out flexbox layouts: http://jonibologna.com/flexbox-cheatsheet/
Edit: Here is the same example with Bootstrap 3:
HTML:
<div class="row row-flex">
<div class="col-md-6 col-v-centered">Centered Content</div>
<div class="col-md-6">
<ul>
<li>Longer</li>
<li>Multi</li>
<li>Line</li>
<li>Content</li>
</ul>
</div>
</div>
CSS:
.row-flex {
display: flex;
}
.col-v-centered {
display: flex;
align-items: center;
}
Codepen

Answer 2

If you want the text to be displayed underneath the second row then you will need to create another image div and add a class so it only displays on mobiles.
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 visible-xs ">
<div class="box2">
<img class="image" src="http://via.placeholder.com/450x450">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="box2">
<h1 class="content-title">Lorem impsum</h1>
<hr>
<p class="content-sub-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet purus ac turpis finibus auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec in dictum arcu, dapibus porta lorem. </p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 hidden-xs ">
<div class="box2">
<img class="image" src="http://via.placeholder.com/450x450">
</div>
</div>
https://jsfiddle.net/7goLo3xy/2/

Answer 3

If you need more control than CSS provides you can use a simple jQuery or JavaScript implementable.
$(window).resize(function() {//on resize
setBoxSizes();
});
function setBoxSizes() {
$('.image').each(function() {
let $imageBox = $(this).closest('.box2');
let imageBoxTop = $imageBox.offset().top;
let $otherBoxes = $imageBox.closest('.row').find('.box2');
$otherBoxes.each(function(){
$box = $(this);
if(!$box.find('.image').length) {//doesn't contain .image
if(Math.abs($box.offset().top - imageBoxTop) < 3) {//on the same layout row
$box.height($imageBox.height());
}
else $box.css('height', 'auto');//restores single column layout
}
});
});
}
setBoxSizes();//initial configuration
Fiddle Example! - Handles multiple column layout, changing columns layouts, and ensures centering is performed against equal horizon boxes.

Answer 4

If you don't want to use Flexbox you could always just set a height of 350px and use table and table-cell with vertical-align set to middle.
However this method does restrict you to having a fixed height so, if the height of your image changes the box height won't be relative. If you want the box to relative you could always set a height of 0 and use padding-bottom. More on this here
<div class="box2">
<div class="center">
<div class="center-v">
<h1 class="content-title">Lorem impsum</h1>
<hr>
<p class="content-sub-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet purus ac turpis finibus auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec in dictum arcu, dapibus porta lorem. </p>
</div>
</div>
</div>
.center {
display: table;
height: 345px;
}
.center-v {
display: table-cell;
vertical-align: middle;
}