<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://use.fontawesome.com/c560c025cf.js"></script> <div class="container"></div> <div class="card"> <div class="card-header bg-dark text-light"> <i class="fa fa-shopping-cart" aria-hidden="true"></i> Nákupný košík <a href="{{route("product.home")}}" class="btn btn-outline-info btn-sm pull-right">Pokračovať v nakupovaní</a> <div class="clearfix"></div> </div> <div class="card-body"> <div class="row"> <div class="col-xs-2 col-md-2"> <img class="img-responsive" src="http://placehold.it/120x80" alt="prewiew"> </div> <div class="col-xs-4 col-md-6"> <h4 class="product-name"><strong>Product name</strong></h4><h4><small>Product description</small></h4> </div> <div class="col-xs-6 col-md-4 row"> <div class="col-xs-6 col-md-6 text-right" style="padding-top: 5px"> <h6><strong>25.00 <span class="text-muted">x</span></strong></h6> </div> <div class="col-xs-4 col-md-4"> <input type="text" class="form-control input-sm" value="1"> </div> <div class="col-xs-2 col-md-2"> <button type="button" class="btn btn-outline-danger btn-xs"> <i class="fa fa-trash" aria-hidden="true"></i> </button> </div> </div> </div> <hr> <div class="row"> <div class="col-xs-2 col-md-2"> <img class="img-responsive" src="http://placehold.it/120x80" alt="prewiew"> </div> <div class="col-xs-4 col-md-6"> <h4 class="product-name"><strong>Product name</strong></h4><h4><small>Product description</small></h4> </div> <div class="col-xs-6 col-md-4 row"> <div class="col-xs-6 col-md-6 text-right" style="padding-top: 5px"> <h6><strong>25.00 <span class="text-muted">x</span></strong></h6> </div> <div class="col-xs-4 col-md-4"> <input type="text" class="form-control input-sm" value="1"> </div> <div class="col-xs-2 col-md-2"> <button type="button" class="btn btn-outline-danger btn-xs"> <i class="fa fa-trash" aria-hidden="true"></i> </button> </div> </div> </div> <hr> <div class="pull-right"> <a href="{{route("product.home")}}" class="btn btn-outline-secondary pull-right">Aktualizovať košík</a> </div> </div> <div class="card-footer"> <a href="{{route("product.home")}}" class="btn btn-success pull-right">Objednať</a> <div class="pull-right" style="margin: 5px"> Celková cena: <b>50.00€</b> </div> </div> </div> </div>

.quantity { float: left; margin-right: 15px; background-color: #eee; position: relative; width: 80px; overflow: hidden } .quantity input { margin: 0; text-align: center; width: 15px; height: 15px; padding: 0; float: right; color: #000; font-size: 20px; border: 0; outline: 0; background-color: #F6F6F6 } .quantity input.qty { position: relative; border: 0; width: 100%; height: 40px; padding: 10px 25px 10px 10px; text-align: center; font-weight: 400; font-size: 15px; border-radius: 0; background-clip: padding-box } .quantity .minus, .quantity .plus { line-height: 0; background-clip: padding-box; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-background-size: 6px 30px; -moz-background-size: 6px 30px; color: #bbb; font-size: 20px; position: absolute; height: 50%; border: 0; right: 0; padding: 0; width: 25px; z-index: 3 } .quantity .minus:hover, .quantity .plus:hover { background-color: #dad8da } .quantity .minus { bottom: 0 }