CODEWITHSUNDEEP
vue.jsbootstrap-4
Centauri_a
Centauri_a

Reputation: 25

How can I display a forreach() list of div on multiple three columns row

I display an array posts:[], which contain a JSON object. Everything is fine except that I can't display three columns in a row with Bootstrap. Even though I specified in the class="col-4". Here's my code.

    <div class="" v-for="post of posts">
        <div class="col-12 col-lg-4">
        <router-link :to="'panneau/' + post['id_panneau']">
       "...."   
        </router-link>
        </div>
    </div>

The following image shows what it happens and how I want it to act

Upvotes: 0

Views: 59

Answers (2)

Rhythm Ruparelia
Rhythm Ruparelia

Reputation: 667

You can update your code as given below and check:

<div class="row">
   <div class="col-12 col-lg-4" v-for="post of posts">
      <router-link :to="'panneau/' + post['id_panneau']">
         "...."   
      </router-link>
   </div>
</div>

Upvotes: 0

Joao Paulo
Joao Paulo

Reputation: 199

The v-for="..." property must be in the element you want to loop. In this case you are looping the first div not the one with the col-* class. Try remove the second div and add those classes to the first one.

<div  class="col-12 col-lg-4" v-for="post of posts">
    <router-link :to="'panneau/' + post['id_panneau']">
      "...."   
    </router-link>
</div>

Upvotes: 1

Related Questions