Just starting out with vuejs and attempting to create a grid by looping through objects using bootstrap classes. However, I'm running into an issue where the cards are not forming a grid as expected when utilizing the col classes.
Below 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>
https://i.sstatic.net/OaPsz.png
The issue persists where all cards are displaying in a single column instead of a grid layout.
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>
In need of assistance in getting the cards to properly form a grid layout. Any help would be greatly appreciated.