Quiero implementar el desplazamiento en el arranque en mi componente secundario (ProductList.vue). ¿Alguien puede ayudarme a pegar el código en boostrap 5? He buscado el problema pero aún no lo he encontrado. Este es mi código bootstrap 5 en el componente secundario (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>

esto está en el componente principal (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>

Quiero que los resultados de las tarjetas se puedan desplazar así https://getbootstrap.com/docs/5.0/utilities/overflow/