Bootstrap - Align DIVs to top, middle, and bottom

Question

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 an answer to position a div vertically, but doesn't address other items. Another answer here, but how would you add the DIVs that need to be aligned vertically to top and bottom?

Here's the HTML:

<div class="carousel-caption"> <!-- outer container; all items horizontally centered -->
    <div class="row align-top"> <!-- align this DIV to top -->
        <h1 class="col-sm-12">Top DIV</h1>
    </div>
    <div class="row align-vertical-center"> <!-- align this DIV to center -->
        <div class="col-sm-12 ">Middle DIV</div>
    </div>
    <div class="row align-vertical-bottom">
        <div class="align-vertical-bottom">Bottom DIV</div>
    </div>
</div>

Answer 1

For this HTML:

<div class="container">
  <div class="carousel-caption"> <!-- outer container; all items horizontally centered -->
    <div class="row vtop"> <!-- align this DIV to top -->
        <div class="col-sm-12">Top DIV</div>
    </div>
    <div class="row vcenter"> <!-- align this DIV to center -->
        <div class="col-sm-12 ">Middle DIV</div>
    </div>
    <div class="row vbottom">
        <div class="col-sm-12 vbottom">Bottom DIV</div>
    </div>
  </div>
</div>

This CSS:

.carousel-caption{
    padding:0;
 }

.vtop{
  /*padding on parent fixes this*/
}

.vcenter{
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}

.vbottom{
    position: relative;
    top: 100%;
    transform: translateY(-100%); 
}

See this Bootply Demo

HTH!