How to push div to the bottom with CSS?

Question

I have an HTML defined as follows:

<div id="container" className='row'>
    <div className='col-sm-9 col-md-6 col-lg-8'>
    </div>
    <div className='col-sm-3 col-md-6 col-lg-4'>
       <button id="bot" />
    </div>
</div>

So, I want the button with the id of bot (or its container div) to be placed at the bottom relative to the container div with the class row.

I tried to do this:

#container
{
   position: relative;
}

#bot
{
   position: absolute;
   bottom: 0;
}

But, this changes the design considerably, as it will push the bot to the left and on top of its sibling div. As you can see I'm using Bootstrap for dividing it into grids. How can I push this button to the bottom with CSS in my case?

Possible duplicate of [How to align content of a div to the bottom?](https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom) — Lazar Ljubenović, Sep 27 '18 at 21:11
@LazarLjubenović Saw that already, but most suggest what I already tried and does not work. Please note I have Bootstrap here too. So, it's not as trivial. — tinker, Sep 27 '18 at 21:12
Bootstrap is written in CSS. There's nothing stopping you from using custom CSS to push it down. As you didn't post a full reproduction, the question is pretty generic as it is, so it certainly looks like a duplicate, especially as there are 24 answers on it. Does _nothing_ work? — Lazar Ljubenović, Sep 27 '18 at 21:14
#container { min-height: calc(100vh - 100px); } #bot { height: 100px; } — Vash72, Sep 27 '18 at 21:14
So you want to place the button at the bottom *center* of the container? — mxdi9i7, Sep 27 '18 at 21:19
@LazarLjubenović Yes, they don't work. Check the image, it might make more sense. — tinker, Sep 27 '18 at 21:24
@mxdi9i7 Check the updated image, that's what I have, using Bootstrap I have divided to two grids, and on the right side I have a button inside a div, and I want to push the button to the bottom, but div also don't have the same height as its sibling div, so somehow need to expand it or just push the whole thing to the bottom. — tinker, Sep 27 '18 at 21:25
Let me confirm: You want to position the button to the bottom of page WHILE extending the container to the bottom of the page? — mxdi9i7, Sep 27 '18 at 21:30
@mxdi9i7 True, but not to the bottom of the page, but to the bottom of the whole container div. The one with id `container`. — tinker, Sep 27 '18 at 21:35

score 2 · Accepted Answer · answered Sep 27 '18 at 21:34

Use d-flex at div and align-self-end for button

Example : https://jsfiddle.net/guiljs/rupoc45j/

 <div class='col-sm-3 col-md-6 col-lg-4 bg-success d-flex'>
Lorem ipsum
<br />
   <button id="bot" class=" align-self-end">
   Button at Bottom!
   </button>
</div>

If you're using React, just change class to className as your sample code.

score 0 · Answer 2 · answered Sep 27 '18 at 21:35

Using display:flex; you can make the contents of the second column align to the end of the column.

.full-height {
  min-height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container py-3 full-height">
  <div class='row'>
    <div class='col-sm-9 col-md-6 col-lg-8'>
      This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This
      column has content. This column has content. This column has content.
    </div>
    <div class='col-sm-3 col-md-6 col-lg-4 d-flex flex-column justify-content-end'>
      <button>Button</button>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Sep 27 '18 at 21:37

You're looking for Bootstrap's align-items-end property. Here is a runnable example:

#container {
  position: relative;
  height: 100px;
  width: 300px;
  background: gray;
}

#bot {
  background: black;
  width: 50px;
  height: 50px;
}

#first {
  height: 100%;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div id="container" class='row align-items-end'>
  <div id="first" class='col-sm-9 col-md-6 col-lg-8'>
  </div>
  <div class='col-sm-3 col-md-6 col-lg-4'>
    <button id="bot" />
  </div>
</div>

If you only want just that one item aligned to the bottom, see Guilherme de Jesus Santos's answer for an example using align-self-end.

score 0 · Answer 4 · answered Sep 27 '18 at 21:42

0

Try #bot's container css as

'{ height:100%; }`

answered Sep 27 '18 at 21:42

vaku

697
8
17

How to push div to the bottom with CSS?

4 Answers4