<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<div class="container">
<br> <p class="text-center">More bootstrap 4 components on <a href="http://bootstrap-ecommerce.com/" target="_blank"> Bootstrap-ecommerce.com</a></p>
<hr>
<div class="card">
<table class="table table-hover shopping-cart-wrap">
<thead class="text-muted">
<tr>
<th scope="col">Product</th>
<th scope="col" width="120">Quantity</th>
<th scope="col" width="120">Price</th>
<th scope="col" width="200" class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<figure class="media">
<div class="img-wrap"><img src="http://bootstrap-ecommerce.com/main/images/items/2.jpg" class="img-thumbnail img-sm"></div>
<figcaption class="media-body">
<h6 class="title text-truncate">Product name goes here </h6>
<dl class="param param-inline small">
<dt>Size: </dt>
<dd>XXL</dd>
</dl>
<dl class="param param-inline small">
<dt>Color: </dt>
