BOOTSRAP 3 vertical-align

Using Boostrap 3, I'm struggling with vectical alignment of DIV. I'm quite lost with all the different css DISPLAY types.

I have a piece of code with a responsive image taking the full viewport. There is a TITLE displayed in the center of the page.

This is a leagacy code. You can find it in CODEPEN here: http://ift.tt/1G8ozPK

Now I would like to add another DIV with a content that would display at the bottom of the image (bottom of the viewport). I tried adding the DIV with some CSS to put it at the bottom. But could not succeed. I think BOOSTRAP is floating left the elements. So I tried with a css snipped like this:

display: inline-block;
vertical-align: bottom;
float: none;

I'm pretty sure I'm misusing the display type.

Here is the CODEPEN attempt: http://ift.tt/1H3Txvg

Any hint or help would be appreciated.