As we did with the navbar, we're going to make use of some of the components from the Bootstrap-Vue library. Open up the ClientApp/components/catalogue/ProductList.vue file and modify the template section:
<template> <div class="products"> <b-container> <h1 class="mt-4 mb-4">Products</h1> <b-row> <b-col class="mb-4" sm="6" v-for="product in products" :key="product.id"> <b-media class="product"> <img slot="aside" :src="product.thumbnail" :alt="product.name" @click="view(product)" /> <h2 class="mt-2" @click="view(product)">{{ product.name }} </h2> <p class="mt-4 mb-4"> {{ product.shortDescription }} </p> <p class="mt-4 mb-4">{{ product.price }}</p> <b-button variant="primary">Add to ...