title: vertical-align with Bootstrap 3
body: <p>I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two <code>div</code>, for example — <a href="http://jsfiddle.net/corinem/CQstd/">JSFiddle link</a>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-5"&gt;
      &lt;div style="height:5em;border:1px solid #000"&gt;Big&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-5"&gt;
      &lt;div style="height:3em;border:1px solid #F00"&gt;Small&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The grid system in Bootstrap uses <code>float: left</code>, not <code>display:inline-block</code>, so the property <code>vertical-align</code> doesn't work. I tried using <code>margin-top</code> to fix it, but I think this is not a good solution for the responsive design.</p>