<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> <!------ Include the above in your HEAD tag ----------> <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> <dd>Orange color</dd> </dl> </figcaption> </figure> </td> <td> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> <td> <div class="price-wrap"> <var class="price">USD 145</var> <small class="text-muted">(USD5 each)</small> </div> <!-- price-wrap .// --> </td> <td class="text-right"> <a title="" href="" class="btn btn-outline-success" data-toggle="tooltip" data-original-title="Save to Wishlist"> <i class="fa fa-heart"></i></a> <a href="" class="btn btn-outline-danger"> × Remove</a> </td> </tr> <tr> <td> <figure class="media"> <div class="img-wrap"><img src="http://bootstrap-ecommerce.com/main/images/items/1.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> <dd>Orange color</dd> </dl> </figcaption> </figure> </td> <td> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> <td> <div class="price-wrap"> <var class="price">USD 35</var> <small class="text-muted">(USD10 each)</small> </div> <!-- price-wrap .// --> </td> <td class="text-right"> <a title="" href="" class="btn btn-outline-success" data-toggle="tooltip" data-original-title="Save to Wishlist"> <i class="fa fa-heart"></i></a> <a href="" class="btn btn-outline-danger btn-round"> × Remove</a> </td> </tr> <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> <dd>Orange color</dd> </dl> </figcaption> </figure> </td> <td> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> <td> <div class="price-wrap"> <var class="price">USD 45</var> <small class="text-muted">(USD15 each)</small> </div> <!-- price-wrap .// --> </td> <td class="text-right"> <a title="" href="" class="btn btn-outline-success" data-toggle="tooltip" data-original-title="Save to Wishlist"> <i class="fa fa-heart"></i></a> <a href="" class="btn btn-outline-danger btn-round"> × Remove</a> </td> </tr> </tbody> </table> </div> <!-- card.// --> </div> <!--container end.//--> <br><br> <article class="bg-secondary mb-3"> <div class="card-body text-center"> <h3 class="text-white mt-3">Bootstrap 4 UI KIT</h3> <p class="h5 text-white">Components and templates <br> for Ecommerce, marketplace, booking websites and product landing pages</p> <br> <p><a class="btn btn-warning" target="_blank" href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com <i class="fa fa-window-restore "></i></a></p> </div> <br><br> </article>

.param { margin-bottom: 7px; line-height: 1.4; } .param-inline dt { display: inline-block; } .param dt { margin: 0; margin-right: 7px; font-weight: 600; } .param-inline dd { vertical-align: baseline; display: inline-block; } .param dd { margin: 0; vertical-align: baseline; } .shopping-cart-wrap .price { color: #007bff; font-size: 18px; font-weight: bold; margin-right: 5px; display: block; } var { font-style: normal; } .media img { margin-right: 1rem; } .img-sm { width: 90px; max-height: 75px; object-fit: cover; }