CODEWITHSUNDEEP
twitter-bootstrapvue.js
cura
cura

Reputation: 1204

How to create two columns in a loop using bootstrap?

The idea is to have in each row (row) two columns, how could I manage this in the vue loop?

Something I hope:

enter image description here

Html:

<div class="row">
  <div v-for='(item,indice) in produtos' :key='indice'>
    <q-card inline class="q-ma-sm col-6">
      <q-card-media>
        <img v-bind:src="item.url">
      </q-card-media>
      <q-card-actions align="around">
        <q-btn flat round icon="fas fa-shopping-cart" @click="cart($event,item)"/>
        <q-btn flat round icon="favorite" @click="favorite($event,item)"/>
        <q-btn flat round icon="share" to="whatsapp://send?text=Hello%20World!" />
      </q-card-actions>
    </q-card>
  </div>
</div>

Upvotes: 0

Views: 1534

Answers (1)

latovic
latovic

Reputation: 927

Can you try this:

<div class="row">
  <div v-for='(item,indice) in produtos' :key='indice' class="col-6">
    <h1>{{ item }}</h1>
  </div>
</div>

Upvotes: 2

Related Questions