CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
tinker
tinker

Reputation: 3424

How to push div to the bottom with CSS?

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?

enter image description here

Upvotes: 0

Views: 4049

Answers (4)

vaku
vaku

Reputation: 712

Try #bot's container css as

'{ height:100%; }`

Upvotes: 0

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

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.

Upvotes: 0

JasonB
JasonB

Reputation: 6368

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>

Upvotes: 0

Guilherme de Jesus Santos
Guilherme de Jesus Santos

Reputation: 5053

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.

Upvotes: 2

Related Questions