title: Bootstrap - Align DIVs to top, middle, and bottom
body: <p>I need to have three DIVs in a container DIV, all centered horizontally. The first needs to align to the vertical top of the container, the second to the vertical center, and the third to the vertical bottom. Here's <a href="https://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap">an answer</a> to position a div vertically, but doesn't address other items. Another answer <a href="https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3">here</a>, but how would you add the DIVs that need to be aligned vertically to top and bottom?</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="carousel-caption"&gt; &lt;!-- outer container; all items horizontally centered --&gt;
      &lt;div class="row align-top"&gt; &lt;!-- align this DIV to top --&gt;
          &lt;h1 class="col-sm-12"&gt;Top DIV&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="row align-vertical-center"&gt; &lt;!-- align this DIV to center --&gt;
          &lt;div class="col-sm-12 "&gt;Middle DIV&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row align-vertical-bottom"&gt;
          &lt;div class="align-vertical-bottom"&gt;Bottom DIV&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>