CODEWITHSUNDEEP
htmlcssvuejs3bootstrap-5
Woden
Woden

Reputation: 1386

Vue 3 masonry layout combined with bootstrap 5

I've been searching for the solutions for the masonry layout under vue 3 framework with bootstrap, but no luck. Using the bootstrap 5 cards with masonry CDN squeezed and overlap the cards, but still did not render the expected layout. Maybe I missed something. Any help is highly appreciated.

EDIT:

  1. Here is the code sandbox with some data.
  2. HTML example with codeply.

Here is part of my code:

<template>
  <div class="container">
    <div class="row justify-content-center" data-masonry='{"percentPosition": true }'>
      <div class="col-lg-3 col-md-4 col-sm-col" v-for="(newsPiece, index) in newsCollection" :key="index">
        <div class="card shadow-sm mt-3 mx-1">
        <img :src="newsPiece.urlToImage" alt="image link lost" data-bs-toggle="collapse"
          :data-bs-target="'#collapseImage'+index">
        <h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
        <div class="collapse" :id="'collapseImage'+index">
          <div class="card-body-noborder">
            <span v-html="newsPiece.description"></span>
          </div>
        </div>
        <div class="card-footer">
          {{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card {
  width: 13rem; 
  border-radius:10px;
}
.row {
  padding: 0 15%;
}
h5 {
  font-size: 1rem;
}
.card-footer {
  font-size: 1rem;
}

@media screen and (max-width:600px) {
  .card {
    width: 20rem;
    border-radius:10px;
  }
  h5 {
    font-size: 1.2rem;
  }
}
</style>

Upvotes: 2

Views: 1300

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362630

To use Masonry with Vue you need to...

  1. install it as a dependency...
npm install masonry-layout
  1. import it...
import Masonry from "masonry-layout"
  1. finally, initialize it in your Vue component...
...
  mounted() {
    // initialize masonry
    var row = document.querySelector("[data-masonry]");
    new Masonry(row, {
      // options
      percentPosition: true,
    });
  },
...

CodeSandbox

Upvotes: 2

Related Questions