Bootstrap vertical align property not working

Question

A very basic question from the documentation of Bootstrap. Everything seemed to have worked so far, except this vertical alignment. In the following images you can see How it should be and How it appears in my browser.

   <div class="container">
      <div class="row">
        <div class="col align-self-start">
          One of three columns
        </div>
        <div class="col align-self-center">
          One of three columns
        </div>
        <div class="col align-self-end">
          One of three columns
        </div>
      </div>
   </div>

Answer 1

Vertical center is relative to height. In your example, all of the sibling columns are the same height so you're not going to see any variation in alignment.

Either the .row needs to have a defined height, or some content in the columns causes the row to have more height.

<div class="container">
    <div class="row" style="height:180px">
        <div class="col align-self-start">
            One of three columns
        </div>
        <div class="col align-self-center">
            One of three columns
        </div>
        <div class="col align-self-end">
            One of three columns
        </div>
    </div>
</div>

Demo: https://www.codeply.com/go/aCGgDtzhdY