Q:

Bootstrap Vertical Align Small Column Not Working

I have a bootstrap page that is basically two columns. One column has several columns and content in it which makes it very large and the other has just an image. I am trying to get that image vertically centered to the left column. My code looks like this:
<div class="row">
  <div class="col-sm-6 features">
    <div class="col-sm-12">
      This column has a lot of content and gets to be about 700px
    </div>
  </div>
  <div class="col-sm-6 small-column-align">
    <img src="inc/img/robot-warrior.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>
  </div>
</div>

And my CSS for small-column-align is 
.small-column-align{
    display: inline-block;
    vertical-align: middle;
    float: none;
}

For some reason the right column is always top aligned though. 

A:

The problem is that you are setting the column width to col-sm-6 on both div's, and that makes the two divs float one below each other, try to put it col-sm-5 on both and also put the class "small-column-align" to both div's.
HTML:
<div class="row">
<div class="col-sm-5 small-column-align">
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <img src="http://labs.sogeti.com/wp-content/uploads/2015/03/google-car.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>

    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
</div>
<div class="col-sm-5 small-column-align">

    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <img src="http://labs.sogeti.com/wp-content/uploads/2015/03/google-car.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
</div>

CSS:
.small-column-align {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Working fiddle: https://jsfiddle.net/DTcHh/12674/
Hope it works, let me know your thoughts,
Leo.

