How align to bottom a row div in bootstrap?

Question

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!

Answer 1

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>

Answer 2

I prefer creating a spacer class like this:

.spacer{
    height: height in %;
}

Then just add the spacer class like this:

<div class="row">
<div class="spacer">
<div class="row">

That way, you can easily have a space between rows that is responsive.

EDIT:

if you have a page that is not higher then 1280px you can try it makes the last row stick to the bottom of the page

.row:last-child {
    position: fixed;
    bottom: 0;
}

Answer 3

If I understand correctly - can't you just add margin-bottom to the second row to create the vertical space between the second and third row?

Also note that col-12's can just be divs inside a container, they don't need a row or the col-12 class.