"cart page in bs3"
Bootstrap 4.1.1 Snippet by ravic9089

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <style> </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-10 col-md-offset-1"> <table class="table table-hover menu-tabu"> <thead> <tr> <th>Description</th> <th>Unit Price</th> <th>Quantity</th> <th></th> <th class="text-center">Subtotal</th> <th> </th> </tr> </thead> <tbody> <tr> <td class="col-sm-4 col-md-4"> <h4 class="media-heading"><a href="#">Onion 1-kg</a></h4> </td> <td class="col-sm-1 col-md-2"><strong>Rs 4.87</strong></td> <td class="col-sm-1 col-md-1" style="text-align: center"> <input type="text" class="form-control" id="" value="3"> </td> <td class="col-sm-1 col-md-1 text-center"><button type="button" class="btn btn-success btn-sm">Update</button></td> <td class="col-sm-1 col-md-1 text-center"><strong>Rs 14.61</strong></td> <td class="col-sm-1 col-md-1"> <a class="rmovawa" href=""> <span class="glyphicon glyphicon-remove"></span> </a></td> </tr> <tr> <td class="col-sm-4 col-md-4"> <h4 class="media-heading"><a href="#">Onion 1-kg</a></h4> </td> <td class="col-sm-1 col-md-2 "><strong>Rs 4.87</strong></td> <td class="col-sm-1 col-md-1" style="text-align: center"> <input type="text" class="form-control" id="" value="3"> </td> <td class="col-sm-1 col-md-1 text-center"><button type="button" class="btn btn-success btn-sm">Update</button></td> <td class="col-sm-1 col-md-1 text-center"><strong>Rs 14.61</strong></td> <td class="col-sm-1 col-md-1"> <a class="rmovawa" href=""> <span class="glyphicon glyphicon-remove"></span> </a></td> </tr> </tbody> </table> <hr class="my-hr"> </div> <div class="col-sm-12 col-md-10 col-md-offset-1"> <div class="col-xs-12 col-md-7"> <h5>Apply Your Coupan Here</h5> <form class="form-inline"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-success" type="button">Apply Coupan</button> </span> </div> </form> </div> <div class="col-xs-12 col-md-5"> <div class="myborder-right"> <div class="left-meni"><h5>Total Value</h5></div><div class="right-meni"><h5>Rs 50</h5></div> <hr> <div class="clear"></div> <div class="left-meni"><h5>Delivery Charges</h5></div><div class="right-meni"><h5>Rs 50</h5></div> <div class="clear"></div> <div class="left-meni"><h5>Total Payable Amount</h5></div><div class="right-meni"><h5>Rs 50</h5></div> <div class="clear"></div> <button class="btn btn-success">Minimum Order is Rs 200</button> </div> </div> </div> <div class="col-sm-12 col-md-10 col-md-offset-1"> <center><button class="btn btn-success btwa">Continue Shopping</button></center> </div> </div> </div> </div> </div> </body> </html>
.left-meni{ float:left; width:65%; } .left-meni h5 { font-weight: 500; font-size: 17px; } .right-meni{ float:left; width:35%; } .right-meni h5 { font-weight: 500; font-size: 16px; } .clear{ clear:both; } .myborder-right { border: 1px solid #ccc; padding: 17px 11px; min-height: 143px; overflow: hidden; margin: 10px 0px; border-radius:4px; } .menu-tabu{ margin: 20px 0px; } .menu-tabu thead { background-color:#5cb85c; color: #fff; } .my-hr{ height: -1px; background-color: #00800052; padding: 1px; } .btwa{ margin-top:30px; } .rmovawa { width: 60px; height: 60px; background-color#666: ; background-color: #827f7f; padding: 5px; color: #fff; cursor: pointer; } .payment-meth li{ list-style:none; display: inline-block; margin:10px 0px; } .payment-meth img{ display: inline-block; height: 70px; width:75px; margin: 1px 16px; } @media only screen and (max-width: 600px) { .payment-meth img{ height: 50px; width: 55px; margin: 1px 5px; } }

Related: See More

Rubik Presentation Page
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: