Seeking assistance with implementing scroll in Bootstrap 5 on my child component (ProductList.vue). Can anyone guide me on how to integrate the code? I have been searching for a solution without success. Below is the Bootstrap 5 code on the child component (ProductList.vue):
<template>
<div class="row d-flex justify-content-center">
<div
class="card text-center card-wrapper"
style="width: 18rem"
v-for="product in products"
:key="product.item"
>
<img class="p-2" style="max-height:200px; height:100%" :src="product.imgUrl" alt="product.title" />
<div class="card-body ">
<h5 class="card-title text-truncate">{{ product.title }}</h5>
<p class="card-text">$ {{ product.price }}</p>
<a href="#" class="btn btn-primary">Add to cart</a>
</div>
</div>
</div>
</template>
<script>
import products from "../item/product.json";
export default {
name: "ProduckList",
data() {
return {
products,
};
},
};
</script>
<style scoped>
.card-wrapper {
background-color: rgb(149, 211, 247);
}
</style>
This section pertains to the parent component (App.vue):
<template>
<Header />
<div class="row">
<div class="col-8">
<produck-list />
</div>
<div class="col-4">
<Cart />
</div>
</div>
</template>
<script>
import Header from "./components/Header.vue";
import ProduckList from "./components/ProductList.vue";
import Cart from "./components/Cart.vue";
export default {
components: {
Header,
ProduckList,
Cart,
},
};
</script>
<style>
body {
background-color: rgb(13, 30, 37)!important;
}
</style>
I am looking to make the results of the cards scrollable similar to what is demonstrated here: https://getbootstrap.com/docs/5.0/utilities/overflow/