How align to bottom a row div in bootstrap?

css, html, responsive-design, twitter-bootstrap

Solution

A solution is if you add to the `div` with the class container the classes `d-flex`, `flex-column` and `h-100`.

Then you need to add `mt-auto` to the last `row`. That will add a margin to all the space that is left on the screen. So this works on all screensizes.

Also important is that the `html`, the `body` and all elements above the `div` with the class `container` use the full height. You can achieve this with the following css:

html, body {
  height: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style>
html, body, #main {
  height: 100%;
}
</style>

<div id="main">
  <div class="container-fluid d-flex flex-column h-100">
    <div class="row">
      <div class="col-md-12">
        <div class="logo col-centered">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 title text-center">THE TITLE</div>
    </div>
    <div class="row">
      <div class="col-md-5 col-centered text-center description">Lorem ipsum</div>
      <div class="description_arrow col-centered"></div>
    </div>
    <div class="row mt-auto mb-3">
      <div class="col-md-5 col-sm-8 col-xs-12 col-centered">
        <div class="image-container">
          <img id="image-phone" src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png" class="img-responsive" style="max-width: 100px; bottom:0px;">
        </div>
      </div>
    </div>
  </div>
</div>

Problem

I'm trying to align to bottm my row div or anyway tha last element. I'm using bootstrap 3 and I have: ``` <div id="main"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="logo col-centered"> </div> </div> </div> <div class="row"> <div class="col-md-12 title text-center">THE TITLE</div> </div> <div class="row"> <div class="col-md-5 col-centered text-center description">Lorem ipsum</div> <div class="description_arrow col-centered"></div> </div> <div class="row"> <div class="col-md-5 col-sm-8 col-xs-12 col-centered"> <div class="image-container"> <img id="image-phone" src="img/image-phone.png" class="img-responsive" style="bottom:0px;"> </div> </div> </div> </div> </div> ``` In the css I have: ``` #main { min-height: 100%; } ``` Now It look so: ``` |------------------------| |==========ROW===========| |==========ROW===========| |==========ROW===========| |==========SPACE=========| |==========SPACE=========| |------------------------| ``` I want that look so: Now It look so: ``` |------------------------| |==========ROW===========| |==========ROW===========| |==========SPACE=========| |==========SPACE=========| |==========ROW===========| |------------------------| ``` So I want keep the last row in the bottom, how I can do ? EDIT: I can't use margin-bottom on the 2° div, because the distance between the 2° row div and the last row div, can change, and I don't want and high value, because then on 13" screen the page became scrollable. EDIT2: I can't use position: fixed and bottom: 0, because under div #main, I have other div(always 100% height). WORKAROUND 1: I do so: ``` <div id="main" style="position: relative;"> ``` And in the row div class I do: ``` <div class="row" style="position:absolute; bottom: 0px; width: 100%;"> ``` Seems works really fine, but I don't know if it's a good solution or not...please give me a feedback!

Original source