[FIXED] How to vertically center bootstrap column text?

Issue

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

Solution

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

Answered By - Entith

Answer Checked By - David Goodson (PHPFixing Volunteer)