2

I've been building the responsive card collection with Bootstrap 5 and vue 3. With the container and the row classes, I can make the cards align to each at the same level. However, to make the timestamp (card-footer) attached to the bottom, I also use h-100 within the card classes. The timestamp is rendered as expected, but there's a gap between each row if the content changes, illustrated below.

enter image description here

I want to make the card align vertically close to have the same gap between the cards.

enter image description here

Is there any way for doing vertical alignment with Bootstrap?

Here is part of the code for now (with vue3):

<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>
Woden
  • 1,054
  • 2
  • 13
  • 26

1 Answers1

0

As explained here, you're looking for a "Masonry" layout. The recommended method for Bootstrap 5 is to use the Masonry JS plugin.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624