I have a component called Beers and another component called BeerDetailList. In the second component, I'm using a Bootstrap card to display image, title, etc. My issue is that I want to display these cards in multiple rows and columns. I've tried a few different approaches but haven't been successful. Can someone please advise me on how to achieve this?
Beers
<template>
<div>
<div v-bind:key="beer.id" v-for="beer in beers">
<BeerDetailsList v-bind:beer="beer" />
</div>
</div>
</template>
<script>
import BeerDetailsList from "./BeerDetailsList";
export default {
components: { BeerDetailsList },
name: "Beers",
props: ["beers"],
};
</script>
<style scoped></style>
Beer Details List
<template>
<div class="container">
<b-card-group deck>
<b-card
:title="beer.name"
:img-src="beer.image_url"
:alt="beer.name"
img-top
tag="article"
style="max-width: 20rem ;"
class="mb-2"
>
<b-card-text>
{{ beer.tagline }}
</b-card-text>
<b-button href="#" variant="primary">View Beer details</b-button>
</b-card>
</b-card-group>
</div>
</template>
<script>
export default {
name: "BeerDetailsList",
props: ["beer"],
};
</script>
<style scoped></style>