How to create two columns in a loop using bootstrap?

Question

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

Something I hope:

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>

What is not working with the code you posted? Each card should fill a space of 6 columns, with two cards filling the whole row (12 columns) and then wrap to a new line. — puelo
– puelo, Commented Jul 30, 2018 at 12:33
maybe put the v-for on the q-card and remove the wrapping div. — puelo
– puelo, Commented Jul 30, 2018 at 12:36

latovic · Accepted Answer · 2018-07-30 12:38:27Z

2

Can you try this:

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

answered Jul 30, 2018 at 12:38

latovic

9276 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create two columns in a loop using bootstrap?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related