Bootstrap vertically push to the bottom - css

Question

html
<div class="container">
<div id="movies" class="well">
<div class="col-md-3">
<div class="well text-center">
<img src="#">
<h5>title</h5>
<a class="btn btn-primary" href="#">Detail</a>
</div>
</div>
<div class="col-md-3">
<div class="well text-center">
<img src="#">
<h5>title</h5>
<a class="btn btn-primary" href="#">Detail</a>
</div>
</div>
</div>
</div>
css
#movies img, #movie img{
width: 100%;
}
#media(min-width:960px){
#movies .col-md-3 .well{
height: 390px;
}
#movies .col-md-3 img{
height: 240px;
}
}
img As you can see in the image, the Detail buttons are not in the same horizontal line. I would like to push the first one down.

Answer 1

You can use flexbox to achieve this. Try this (View it in "full page" mode).
#movies img, #movie img {
width: 100%;
}
#media(min-width:960px) {
#movies .col-md-3 .well {
height: 350px;
display: flex;
flex-direction: column;
align-items: center;
}
#movies .col-md-3 img {
height: 240px;
}
#movies .btn {
margin-top: auto;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container">
<div id="movies" class="row well">
<div class="col-md-3">
<div class="well text-center">
<img src="https://via.placeholder.com/260">
<h5>Qui minim nulla veniam.</h5>
<a class="btn btn-primary" href="#">Detail</a>
</div>
</div>
<div class="col-md-3">
<div class="well text-center">
<img src="https://via.placeholder.com/260">
<h5>Ut reprehenderit cillum occaecat sint voluptate</h5>
<a class="btn btn-primary" href="#">Detail</a>
</div>
</div>
</div>
</div>