CODEWITHSUNDEEP
htmlcss
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

Vertical-align bottom not working in a table-cell

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?

Upvotes: 0

Views: 2298

Answers (2)

vignesh
vignesh

Reputation: 1011

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>

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

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/

Upvotes: 0

Related Questions