CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvue.jsbootstrap-4
Saaransh Menon
Saaransh Menon

Reputation: 416

Cards not forming grid while using v-for and bootstrap

I am new to vuejs and trying to create a grid by looping through objects by using bootstrap classes but when using the col classes the cards are only put in a single column rather than forming a grid.

Here is the code for the component:

<template>
  <div class="row">
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <div class="card-header card-head-color">
          NAME <small>(Price: PRICE)</small>
        </div>
        <div class="card-body">
          <div class="float-left">
            <input type="number" class="form-control" placeholder="Quantity" />
          </div>
          <button class="btn btn-success float-right">Buy</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Stock",
};
</script>

<style scoped>
.card-head-color {
  background-color: #54db47;
  opacity: 0.7;
}
</style>

All the cards are in a single column rather than forming a grid

All the cards are in a single column rather than forming a grid.

This is the parent component where it is called:-

<template>
  <div>
    <app-stock v-for="stock in stocks" :key="stock.id"> </app-stock>
  </div>
</template>

<script>
import Stock from "@/components/stock/Stock";
export default {
  name: "Stocks",
  data() {
    return {
      stocks: [
        {
          id: 1,
          name: "BMW",
          price: 100,
        },
        {
          id: 2,
          name: "Google",
          price: 200,
        },
        {
          id: 3,
          name: "Apple",
          price: 250,
        },
        {
          id: 4,
          name: "Twitter",
          price: 10,
        },
      ],
    };
  },
  components: {
    appStock: Stock,
  },
};
</script>

<style scoped></style>

I want the cards to form a grid. Help would be appreciated.

Upvotes: 1

Views: 910

Answers (1)

Naomi Messing
Naomi Messing

Reputation: 668

You loop over the row and in the row element you have only one card. so every single col gets the whole width...

if you want to position some cards next to each other, you should change the <row> element to be wrapper of your v-for element. an exaple:

in your father component:

<template>
  <div id="app">
      <b-container>
          <b-row>
              <app-stock v-for="stock in stocks" :key="stock.id"></app-stock>
          </b-row>
      </b-container>
  </div>
</template>

and in the child:

<template>
   <b-col class="col-md-6 col-lg-4">
       <div class="card">
           <div class="card-header card-head-color">
               NAME <small>(Price: PRICE)</small>
           </div>
           <div class="card-body">
               <div class="float-left">
                <input type="number" class="form-control" placeholder="Quantity"/>
            </div>
            <button class="btn btn-success float-right">Buy</button>
        </div>
    </div>
</b-col>

Upvotes: 4

Related Questions