垂直对齐的底部在工作单元格中不起作用

Question

I have a div which is a bootstrap row. I want to vertically align a to the bottom of the div, however it is still aligned to the top of the row div.

Code:

    <div class="row" style="height:100%;">
      <div class="col-xs-12" style="height:100%;display:table-cell;vertical-align: bottom;">
        <h4 style="color:#FFF;vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
      </div>
    </div>

Why is this code not working?

Answer 1

Please refer the code:

<div class="row">
  <div class="col-xs-12" style="display:table;">
    <h4 style="color:#000; display: table-cell; vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
</div>

Answer 2

add display:table to parent div.row also add body & html Height 100%;

<div class="row" style="height:100%; display: table;">
      <div class="col-xs-12" style="height:100%;display:table-cell;vertical-align: bottom;">
        <h4 style="color:#FFF;vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
      </div>
    </div>

https://jsfiddle.net/mjaty6u7/