title: Vertical align button in the middle of the column- bootstrap
body: <p>I am using bootstrap and trying to vertically align the button in the column.</p>
  
  <p>Note : I cant use flex and also I can't define height as per standards.</p>
  
  <p>If I use margins it won't work in tablet and mobile devices. </p>
  
  <p>So below is my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.col-xs-2, .col-xs-6 {
     display: inline-block;
  }
  .col-xs-2 {
      vertical-align: middle;
       
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
      &lt;div class="col-xs-4"&gt;
               &lt;h4&gt;Some really large label that will wrap to multiple lines in small screens&lt;/h4&gt;
  
          &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;
               &lt;h4&gt;Some really large label that will wrap to multiple lines in small screens&lt;/h4&gt;
  
          &lt;/div&gt;
          &lt;div class="col-xs-2"&gt;
              &lt;button class="btn" style="color: #660066;"&gt; &lt;i class="fa fa-arrow-left" data-ng-click="onClickBack()"&gt;&lt;/i&gt;
  
              &lt;/button&gt;
          &lt;/div&gt;&lt;!-- 
       --&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/g0yzhgc2/" rel="nofollow">JS Fiddle Link:</a></p>
  
  <p>So my question is how can I make the <strong>arrow button</strong> align to the middle of the row.<br>
  I have tried : <code>display:table-cell</code> and <code>display: inline-block;</code>
  nothing seems to work. Am I missing something? </p>