For my latest project, I have been working on creating a responsive card collection using Bootstrap 5 and Vue 3. By utilizing the container and row classes, I was able to ensure that all cards are aligned at the same level. However, in order to keep the timestamp (card-footer) attached to the bottom of each card, I also included the h-100 class within the card elements. This approach successfully rendered the timestamps as intended, but resulted in uneven gaps between rows when the content varied, as shown below.
https://i.sstatic.net/onMqmm.png
My goal is to achieve consistent vertical alignment of the cards with equal spacing between them.
https://i.sstatic.net/MFWEjm.png
Is there a way to implement vertical alignment using Bootstrap?
Below is a snippet of the current code (using Vue 3):
<div class="container">
<div class="row justify-content-center">
<div class="card h-100 shadow-sm mt-3 mx-1" v-for="(newsPiece, index) in newsCollection" :key="index">
<!-- image can toggle description -->
<img :src="newsPiece.urlToImage" alt="image link lost" data-bs-toggle="collapse"
:data-bs-target="'#collapseImage'+index">
<!-- title -->
<h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
<!-- toggle content from image -->
<div class="collapse" :id="'collapseImage'+index">
<div class="card-body-noborder">
<!-- {{ newsPiece.description }} -->
<span v-html="newsPiece.description"></span>
</div>
</div>
<div class="card-footer">
{{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
</div>
</div>
</div>
</div>