Vertically alignment in Bootstrap causes formatting errors

Question

I am trying to vertically center text in bootstrap. I found this soulution, however when i add the .vcenter class to my code, it conflicts with the formatting of my Bootstrap row. I want the row to be split into 3 columns of 4 width each. One for the text, and two for the images. This is what i have before i add the .vcenter class to my code:

After i add .vcenter

My code:

<div class="container">
  <section class="row start-day ">
    <div class="col-sm-4 start-day-text vcenter">
      <h2>im a body of text that i cant get to vertically align</h2>
    </div>
    <div class="col-sm-4 phone ">
      <%= image_tag 'hand.png', class: 'demo', alt: 'Brieff demo' %>
    </div>
    <div class="col-sm-4 hand ">
      <%= image_tag 'hand2.png', class: 'demo', alt: 'Brieff demo' %>
    </div>
 </section>
</div>

Answer 1

Using the following html:

<div class="container">
    <section class="row body">
        <div class="col-sm-4 fullheight">
                im a body of text that i cant get to vertically align
        </div>
        <div class="col-sm-4 fullheight">
            <img src="tabletPic1_80_o.png" />
        </div>
        <div class="col-sm-4 fullheight">
            <img src="tabletPic1_80_o.png" />
        </div>
    </section>
</div>

apply the following css:

.body
{
    height:100%;
    background-color: antiquewhite;
    display: inline;
}

.fullheight 
{
    color:white;
    background:red;
    border: 1px solid;
    display: inline-block;
    vertical-align: middle;
    float: none;
}