How to push div to the bottom with CSS? - html

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?

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

Try #bot's container css
as
'{
height:100%;
}`