How to set the buttons for all cards at the bottom? - html

Question

how do I align all buttons at the bottom of the card? The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto' however the it's still not being positioned at the bottom?
I attached below the code structure for my cards including the styling for the card content and the buttons.
[![enter image description here](https://i.stack.imgur.com/eJLHT.png)](https://i.stack.imgur.com/eJLHT.png)
<section class="container">
<div class="card">
<div class="card-img card-1"></div>
<div class="card-content">
<h2 class="card-header">Bayanihan E-Konsulta</h2>
<p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
<button class="card-btn">Read more<span>→</span></button>
</div>
</div>
<div class="card">
<div class="card-img card-2"></div>
<div class="card-content">
<h2 class="card-header">Swab Cab</h2>
<p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
<button class="card-btn card-btn-2">Read more<span>→</span></button>
</div>
</div>
<div class="card">
<div class="card-img card-3"></div>
<div class="card-content">
<h2 class="card-header">Free PPEs for HCWs</h2>
<p class="card-text">Vice President Leni Robredo’s office continues its livelihood assistance projects as it turned over materials to a group of Bulacan sewers, who were tapped to make personal protective equipment (PPEs) who were tapped to make personal protective equipment (PPEs). </p>
<button class="card-btn">Read more<span>→</span></button>
</div>
</div>
BACK TO TOP
</section>
`
The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto'. I can fix this by manually adjusting the button's margin but I think it's possible to adjust all buttons simultaneously.

Answer 1

I prepared a example in codepen:
https://codepen.io/isaksonn/pen/eYKzarW
section.container .card{display:flex;flex-direction:column;justify-content:space-between;height:600px;width:200px;border:1px solid gray;padding:10px}section.container .card .card-img{display:block;background-color:gray;width:100%;height:200px}section.container .card .card-content{height:100%;display:flex;flex-direction:column;justify-content:space-between}
<section class="container">
<div class="card">
<div class="card-img card-1"></div>
<div class="card-content">
<!--If you want align the title and text on the top and only the buttons down you have to wrap the firsts in a div, otherwise the text is centered vertically (as second card)-->
<div class="divAdded">
<h2 class="card-header">Bayanihan E-Konsulta</h2>
<p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
</div>
<button class="card-btn">Read more<span>→</span></button>
</div>
</div>
<div class="card">
<div class="card-img card-2"></div>
<div class="card-content">
<h2 class="card-header">Swab Cab</h2>
<p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
<button class="card-btn card-btn-2">Read more<span>→</span></button>
</div>
</div>
BACK TO TOP
</section>

Answer 2

section.container .card{height:600px;width:200px;border:1px solid gray;padding:10px}
section.container .card .card-img{display:block;background-color:gray;width:100%;height:200px}
.btn{
text-align: center;
margin: 10px 0;
}
<section class="container">
<div class="card">
<div class="card-img card-1"></div>
<div class="card-content">
<!--If you want align the title and text on the top and only the buttons down you have to wrap the firsts in a div, otherwise the text is centered vertically (as second card)-->
<div class="divAdded">
<h2 class="card-header">Bayanihan E-Konsulta</h2>
<p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
</div>
<p class="btn"><button class="card-btn">Read more<span>→</span></button></p>
</div>
</div>
<div class="card">
<div class="card-img card-2"></div>
<div class="card-content">
<h2 class="card-header">Swab Cab</h2>
<p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
<p class="btn"><button class="card-btn card-btn-2">Read more<span>→</span></button></p>
</div>
</div>
BACK TO TOP
</section>
You can try this..
add button element in 'p' and you can add class in 'p' element and than go to css file and style