I am trying to make a responsive website containing Bootstrap 4 cards. I would like to show 3 cards on large screens and 2 card on medium screens, all the same height with padding horizontally and vertically.
When I use this code, all cards are the same height:
<div class="col-md-6 col-lg-4 AMLqa card">
<img class="card-img-top" src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image4.jpg" alt="Card image cap">
<div class="card-body">
<h3>Are your clients unsure how to perform some exercises or <span class="AMLqatitle">aren't happy with the foods</span> you have given them in their plans?</h3>
<p class="AMLqatext">The app allows you store step-by-step information along with a video how to perform each exercise to ensure your clients know exactly what to do.</p>
</div>
<button class="btn btn-primary">See how Lifestyle Admin Panel works<i class="far fa-arrow-alt-circle-right" style="margin-left: 0.5em"></i></button>
</div>
But when I try and add padding to them with this code, they are no longer the same height:
<div class="col-md-6 col-lg-4">
<div class="card">
<img class="card-img-top" src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image4.jpg" alt="Card image cap">
<div class="card-body">
<h3>Are you <span class="AMLqatitle">struggling to get noticed</span> amongst the thousands of other PTs in your area?</h3>
<p class="AMLqatext">Providing a world-class service that makes you a client’s first-choice with your own professional app not offered by most other personal trainers.</p>
</div>
<button class="btn btn-primary">Discover Lifestyle's marketing capabilities<i class="far fa-arrow-alt-circle-right" style="margin-left: 0.5em"></i></button>
</div>
</div>
Please can someone advise how this can be done.
