<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container-fluid mt-3 mb-4"> <div class="col-lg-12"> <div class="row"> <div class="col-lg-9 px-0 pr-lg-2 mb-2 mb-lg-0"> <div class="card border-light bg-white card proviewcard shadow-sm"> <div class="card-header">My Cart</div> <div class="card-body"> <div class="col-lg-12 p-3 cardlist"> <div class="col-lg-12"> <div class="row"> <div class="col-lg-8"> <div class="row"> <div class="col-4 col-lg-3 col-xl-2"> <div class="row"> <a href="cateview.php" class="w-100"> <img src="http://placehold.it/100x100" class="mx-auto d-block mb-1 addcartimg"> </a> </div> </div> <div class="col-8 col-lg-9 col-xl-10"> <div class="d-block text-truncate mb-1"> <a href="cateview.php" class="cartproname">Pure Refined Sugar</a> </div> <div class="seller d-block"> <span>Seller: </span> <span>SELL010</span> </div> <div class="cartviewprice d-block"> <span class="amt">Rs.6,258</span> <span class="oldamt">Rs.7,365</span> <span class="disamt">28% off</span> </div> </div> </div> <div class="row"> <div class="col-4 col-lg-3 col-xl-2 p-0 qty"> <div class="input-group"> <div class="input-group-prepend"> <button type="button" class="btn btn-sm btn-qty"><i class="fa fa-minus"></i></button> </div> <input type="text" class="form-control form-control-sm text-center" id="" aria-describedby="" value="8" required> <div class="input-group-append"> <button type="button" class="btn btn-sm btn-qty"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="col-lg-3 col-5"><a href="" class="addcardrmv">Remove</a></div> </div> </div> <div class="col-lg-3 ml-lg-auto align-self-start mt-2 mt-lg-0"> <div class="row"> <div class="prostatus"> <span class="del-time">Delivered <span>2-3 Business Days</span></span> </div> </div> </div> </div> </div> </div> <div class="col-lg-12 p-3 cardlist"> <div class="col-lg-12"> <div class="row"> <div class="col-lg-8"> <div class="row"> <div class="col-4 col-lg-3 col-xl-2"> <div class="row"> <a href="cateview.php" class="w-100"> <img src="http://placehold.it/100x100" class="mx-auto d-block mb-1 addcartimg"> </a> </div> </div> <div class="col-8 col-lg-9 col-xl-10"> <div class="d-block text-truncate mb-1"> <a href="cateview.php" class="cartproname">Ghee</a> </div> <div class="seller d-block"> <span>Seller: </span> <span>SELL010</span> </div> <div class="cartviewprice d-block"> <span class="amt">Rs.2,567</span> <span class="oldamt">Rs.2,700</span> <span class="disamt">15% off</span> </div> </div> </div> <div class="row"> <div class="col-4 col-lg-3 col-xl-2 p-0 qty"> <div class="input-group"> <div class="input-group-prepend"> <button type="button" class="btn btn-sm btn-qty"><i class="fa fa-minus"></i></button> </div> <input type="text" class="form-control form-control-sm text-center" id="" aria-describedby="" value="8" required> <div class="input-group-append"> <button type="button" class="btn btn-sm btn-qty"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="col-lg-3 col-5"><a href="" class="addcardrmv">Remove</a></div> </div> </div> <div class="col-lg-3 ml-lg-auto align-self-start mt-2 mt-lg-0"> <div class="row"> <div class="prostatus"> <span class="del-time">Delivered <span>3 Business Days</span></span> </div> </div> </div> </div> </div> </div> <div class="col-lg-12 p-3 cardlist"> <div class="col-lg-12"> <div class="row"> <div class="col-lg-8"> <div class="row"> <div class="col-4 col-lg-3 col-xl-2"> <div class="row"> <a href="cateview.php" class="w-100"> <img src="http://placehold.it/100x100" class="mx-auto d-block mb-1 addcartimg"> </a> </div> </div> <div class="col-8 col-lg-9 col-xl-10"> <div class="d-block text-truncate mb-1"> <a href="cateview.php" class="cartproname">Veg Noodles</a> </div> <div class="seller d-block"> <span>Seller: </span> <span>SELL010</span> </div> <div class="cartviewprice d-block"> <span class="amt">Rs.4,354</span> <span class="oldamt">Rs.4,698</span> <span class="disamt">35% off</span> </div> </div> </div> <div class="row"> <div class="col-4 col-lg-3 col-xl-2 p-0 qty"> <div class="input-group"> <div class="input-group-prepend"> <button type="button" class="btn btn-sm btn-qty"><i class="fa fa-minus"></i></button> </div> <input type="text" class="form-control form-control-sm text-center" id="" aria-describedby="" value="8" required> <div class="input-group-append"> <button type="button" class="btn btn-sm btn-qty"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="col-lg-3 col-5"><a href="" class="addcardrmv">Remove</a></div> </div> </div> <div class="col-lg-3 ml-lg-auto align-self-start mt-2 mt-lg-0"> <div class="row"> <div class="prostatus"> <span class="del-time">Delivered <span>8 Business Days</span></span> </div> </div> </div> </div> </div> </div> <div class="col-lg-12 p-3 cardlist"> <div class="col-lg-12"> <div class="row"> <div class="col-lg-8"> <div class="row"> <div class="col-4 col-lg-3 col-xl-2"> <div class="row"> <a href="cateview.php" class="w-100"> <img src="http://placehold.it/100x100" class="mx-auto d-block mb-1 addcartimg"> </a> </div> </div> <div class="col-8 col-lg-9 col-xl-10"> <div class="d-block text-truncate mb-1"> <a href="cateview.php" class="cartproname">Sunflower Oil</a> </div> <div class="seller d-block"> <span>Seller: </span> <span>SELL010</span> </div> <div class="cartviewprice d-block"> <span class="amt">Rs.13,650</span> <span class="oldamt">Rs.14,000</span> <span class="disamt">20% off</span> </div> </div> </div> <div class="row"> <div class="col-4 col-lg-3 col-xl-2 p-0 qty"> <div class="input-group"> <div class="input-group-prepend"> <button type="button" class="btn btn-sm btn-qty"><i class="fa fa-minus"></i></button> </div> <input type="text" class="form-control form-control-sm text-center" id="" aria-describedby="" value="8" required> <div class="input-group-append"> <button type="button" class="btn btn-sm btn-qty"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="col-lg-3 col-5"><a href="" class="addcardrmv">Remove</a></div> </div> </div> <div class="col-lg-3 ml-lg-auto align-self-start mt-2 mt-lg-0"> <div class="row"> <div class="prostatus"> <span class="del-time">Delivered <span>6-10 Business Days</span></span> </div> </div> </div> </div> </div> </div> </div> <div class="card-footer border-light cart-panel-foo-fix"> <a href="" class="btn btn-add-con">Continue Shopping</a> <a href="" class="btn btn-cust">Place Order</a> </div> </div> </div> </div> </div> </div>

.card{ border-radius: 0; } .card .card-header{ background-color: #fff; font-size: 18px; padding: 10px 16px; } .proviewcard .card-body{ padding: 0; } .cardlist{ border-bottom: 1px solid #f0f0f0; } .cardlist:last-child{ border: 0; } .addcartimg{ height: 100px; } .cartproname{ font-size: 15px; color: #212529; line-height: 1; display: inline; } .cartproname:hover{ color: #c16302; text-decoration: none; } .seller{ font-size: 12px; color: #666; margin-bottom: 5px; line-height: 1; } .cartviewprice{ margin-bottom: 8px; line-height: 1; } .cartviewprice span{ display: inline-block; padding-right: 10px; margin-bottom: 5px; } .cartviewprice .amt{ font-size: 18px; font-weight: 600; } .cartviewprice .oldamt{ color: #757575; font-weight: 600; text-decoration: line-through; } .cartviewprice .disamt{ font-weight: 600; color: #c16302; } .qty .input-group{ width: 100%; height: 25px; } .btn-qty{ height: 25px; color: #fff !important; background-color: #555 !important; border-color: #555 !important; padding: 0px 3px !important; } .qty input{ height: 25px; } .addcardrmv{ font-size: 14px; line-height: 1.8; text-transform: uppercase; color: #212529; } .addcardrmv:hover{ color: #c16302; text-decoration: none; font-weight: 600; } .prostatus .del-time { font-size: 12px; color: #757575; margin-right: 10px; } .prostatus .del-time > span { font-weight: 600; color: #555; } .proviewcard .card-footer{ text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 10px 0px; padding: 8px 15px; } .btn-add-con{ background-color: #fff; color: #212121; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px 0px; font-size: 16px; font-weight: 500; padding: 8px 20px; border-radius: 2px; border-width: 1px; border-style: solid; border-color: #E0E0E0; border-image: initial; min-width: 185px; } .card .card-footer{ background-color: #fff; } /*Card Footer Fixed*/ @supports (box-shadow: 2px 2px 2px black){ .cart-panel-foo-fix{ position: sticky; bottom: 0; z-index: 9; } } .btn-cust { background-color: #e96125 !important; color: #fff !important; font-size: 16px; padding: 8px 8px; min-width: 128px; } .btn-cust:hover { background-color: #c74b14 !important; color: #fff !important; }