After struggling to align my bootstrap cards for what feels like forever, I've decided to seek help by creating this post. Hopefully someone can assist me!
Initially, the cards were all the same width and stacked correctly, but the height was not consistent. They lined up in a row but only stretched to match the content's height.
I managed to find a solution that fixed the height issue by using d-flex align-items-stretch in the containing div. However, now on smaller devices, the height matches, but the width extends with the content. Any suggestions?
<section class="row ">
<div class="col-12">
<h3 class="mb-4">Row Title</h3>
</div>
<div class="col-lg-6 mb-4 d-flex align-items-stretch">
<div class="card">
<div class="card-header">Card 1</div>
<div class="card-block">
<p><b>Overview:</b> Text 1<br><br>
<b>More:</b> Text 2<br><br></p>
<button class="btn btn-secondary margin" type="button"><span class="fa fa-check"></span> Go</button>
<button class="btn btn-secondary margin" type="button"><span class="fa fa-file"></span> Information</button>
</div>
</div>
</div>
<div class="col-lg-6 mb-4 d-flex align-items-stretch">
<div class="card text-white bg-success">
<div class="card-header">Card 2</div>
<div class="card-block">
<p><b>Overview:</b> Text 2</b></p>
<button class="btn btn-secondary margin" type="button"><span class="fa fa-check"></span> Go</button>
<button class="btn btn-secondary margin" type="button"><span class="fa fa-file"></span> Information</button>
</div>
</div>
</div>