I have a text in bootstrap card and there's a button under it. Everytime I resize the page the balance between the one card with less text and the other one with more text is broken. Basically the button on card 2 is pushed down more because there's more lines of text than in the card 3 and the buttons are balanced with padding.
I tried to fix this with Bootstrap's text-justify but that only makes the text to go to the possible end and the text still overflows to another line. I have tried searching for solution but found out that there's only a styling that allows you to make text dissapear like "Hey I'm..." when it overflows the selected amount of lines.
How can I balance the buttons to all stay inline with each other no matter the number of lines?
Here's my code :
<section id="avaiable">
<div class="container-fluid shorter pt-4 pb-2 bg-white text-justify">
<!--Benefit cards-->
<div class="row">
<!--Student programs card-->
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/student.jpg" alt="student programs" class="card-img-top border-radius rounded-top rounded-bottom">
<div class="card-body">
<h4 class="card-title font-proximanova-bold">Student programs</h4>
<p class="card-text">
<h5 class="pb-3 color-grey font-proximanova-light">Discover more about student programs that help you get in touch with employers.</h5>
<a href="" class="btn btn-crimson">
<h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
</a>
</div>
</div>
</div>
<!--Student programs card-->
<!--Community engagement card-->
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/community.jpg" alt="community engagement" class="card-img-top border-radius rounded-top rounded-bottom">
<div class="card-body">
<h4 class="card-title font-proximanova-bold">Community engagement</h4>
<p class="card-text">
<h5 class="pb-3 color-grey font-proximanova-light">We engage and listen to our community, we value people who want to do their best.</h5>
<a href="" class="btn btn-crimson">
<h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
</a>
</div>
</div>
</div>
<!--End of community engagement card-->
<!--Invention & innovation card-->
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/innovation.jpg" alt="invention and innovation" class="card-img-top border-radius rounded-top rounded-bottom">
<div class="card-body">
<h4 class="card-title font-proximanova-bold">Invention & innovation</h4>
<p class="card-text">
<h5 class="pb-3 color-grey font-proximanova-light">There are no limits to your inventions, got idea for a new project in mind? Share it right away!</h5>
<a href="" class="btn btn-crimson">
<h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
</a>
</div>
</div>
</div>
<!--End of invention & innovation card-->
</div>
<!--End of benefit cards-->
</div>
</section>
The final goal is to make the buttons stay in line with each other.