Div bottom aligned in column - html

Question

I am using Bootstrap 4 with a four column layout. Now I have one column with longer text which causes the "buttons" at the end to be not aligned.
The HTML is as follows:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
<div class="row mt-4">
<div class="col-lg-12 title-1 text-center">
My Headline
</div>
</div>
<div class="row py-5">
<div class="col-lg-3">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
This is longer text which causes the issue
</div>
<div class="button-1 text-center title-3">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 align-self-end">
MORE INFOS
</div>
</div>
</div>
</div>
So what can I do to make the "buttons" of all columns aligned?

Answer 1

Make the columns flexbox (d-flex flex-column), and then use mt-auto to push the buttons to the bottom...
<div class="container">
<div class="row mt-4">
<div class="col-lg-12 title-1 text-center">
My Headline
</div>
</div>
<div class="row py-5 border">
<div class="col-lg-3 d-flex flex-column">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
This is longer text which causes the issue
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
<div class="col-lg-3 mt-lg-0 mt-5 d-flex flex-column ">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/510x661.png" alt="">
<div class="text-center title-4 volume">lorem</div>
<hr>
<div class="text-center title-2">
Just a test
</div>
<div class="button-1 text-center title-3 mt-auto">
MORE INFOS
</div>
</div>
</div>
</div>
https://codeply.com/go/B1vKo06A3i

Answer 2

Option 1: flexbox with column flow and use margin: auto to push the button
That's the answer #Zim posted (he's fast!)
Option 2: with text-overflow
Another option without flexbox is to style the text-overflow on the text instead. You can use text-overflow on your title-2 class to ensure the title would be just 1 line.
CSS
.title-2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Result
http://jsfiddle.net/aq9Laaew/261632/