Styling the product list and product details components

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 ...

Get ASP.NET Core 2 and Vue.js now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.