Bootstrap 3.0 Setting absolute position for child div

Question

i've a div block where i need to show a block always in bottom of the section no matter if above section is empty inner div should be in the bottom section div like attached

this is what i am doing

<div class="col-md-6 col-xs-6" style="position:relative; min-height:300px;">
  Content for upper section 

  <div class="row" style="position:absolute; bottom:0 !important;">
      <div class="col-xs-12">
        Div in footer  section of the parent div 
      </div>
  </div>
</div>

what i expect even f there is no content in top section bottom div should be in footer of the parent div instead of starting from the top section , as in attached image but that is not the case please help me to solve it

Answer 1

You must have some custom styling because i just tested your code and it works. The row-class is stuck to the bottom as it is supposed to.

By the way, all col-* classes is position relative by bootstrap default. No need to specify it in the style tag.

Answer 2

Check your spellings, its a typo:

Change positoin to position