<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-10 col-md-offset-1"> <table class="table table-hover"> <thead> <tr> <th>Product</th> <th>Quantity</th> <th class="text-center">Price</th> <th class="text-center">Total</th> <th>Remove</th> </tr> </thead> <tbody> <tr> <td class="col-sm-6 col-md-4"> <div class="media"> <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a> <div class="media-body"> <h4 class="media-heading"><a href="#">Product name</a></h4> <h5 class="media-heading"> by <a href="#">Brand name</a></h5> <span>Status: </span><span class="text-success"><strong>In Stock</strong></span> </div> </div></td> <td class="col-sm-2 col-md-2" style="text-align: center"> 3 </td> <td class="col-sm-1 col-md-2 text-center"><strong>$4.87</strong></td> <td class="col-sm-1 col-md-2 text-center"><strong>$14.61</strong></td> <td class="col-sm-1 col-md-2"> <div class="material-switch"> <input id="someSwitchOptionDanger" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionDanger" class="label-danger"></label> </div> </td> </tr> <tr> <td class="col-sm-6 col-md-4" style="text-align:right; vertical-align:middle; background: #ccc; padding: 8px;"> <strong>Discount code:</strong> </td> <td class="col-sm-2 col-md-2"> <input type="text" class="form-control"> </td> <td class="col-sm-1 col-md-2">   </td> <td class="col-sm-1 col-md-2"> </td> <td class="col-sm-1 col-md-2"> <button type="button" class="btn btn-primary"> Update </button></td> </tr> <tr> <td class="col-sm-6 col-md-4">   </td> <td class="col-sm-2 col-md-2">   </td> <td class="col-sm-1 col-md-2">   </td> <td class="col-sm-1 col-md-2"><h5>Subtotal</h5></td> <td class="col-sm-1 col-md-2 "><h5><strong>$24.59</strong></h5></td> </tr> <tr> <td class="col-sm-6 col-md-4">   </td> <td class="col-sm-2 col-md-2">   </td> <td class="col-sm-1 col-md-2">   </td> <td class="col-sm-1 col-md-2"><h5>Estimated shipping</h5></td> <td class=""><h5><strong>$6.94</strong></h5></td> </tr> <tr> <td class="col-sm-8 col-md-4">   </td> <td class="col-sm-1 col-md-2">   </td> <td class="col-sm-1 col-md-2">   </td> <td class="col-sm-1 col-md-2"><h3>Total</h3></td> <td class="col-sm-1 col-md-2 "><h3><strong>$31.53</strong></h3></td> </tr> <tr> <td class="col-sm-8 col-md-4">   </td> <td class="col-sm-1 col-md-2">   </td> <td class="col-sm-1 col-md-2">   </td> <td class="col-sm-1 col-md-2"> <button type="button" class="btn btn-default"> Devam Et </button></td> <td class="col-sm-1 col-md-2"> <button type="button" class="btn btn-success"> Tamamla </button></td> </tr> </tbody> </table> </div> </div> </div>

.material-switch > input[type="checkbox"] { display: none; } .material-switch > label { cursor: pointer; height: 0px; position: relative; width: 40px; } .material-switch > label::before { background: #3c763d; box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 0px; content: ''; height: 30px; margin-top: -8px; position:absolute; opacity: 0.7; transition: all 0.4s ease-in-out; width: 60px; } .material-switch > label::after { background: rgb(255, 255, 255); border-radius: 2px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 30px; left: 0px; margin-top: -8px; position: absolute; top: 0px; transition: all 0.3s ease-in-out; width: 24px; } .material-switch > input[type="checkbox"]:checked + label::before { background: inherit; opacity: 0.5; } .material-switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 36px; } .media>.pull-left { margin-right: 10px; }