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

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.

    

        

            One of three columns
        
        

            One of three columns
        
        

            One of three columns
        
    

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