"plus minus in text box"
Bootstrap 3.3.0 Snippet by sachinkul6185@gmail.com

Post to Facebook Tweet this

<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="//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 http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Product</title> <!-- Bootstrap --> <link href="css/style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="wrapper-max"> <div class="wrapper-in"> <div class="product_header"> <ul> <li>Product</li> <li>Price</li> <li>Qty</li> <li>Cost</li> <li></li> </ul> </div> <div class="product_header detail_product"> <div class="product-wrap"> <div class="title">Swim Short Medium</div> <div class="price">$1.99</div> <div class="text-box-wrap"> <input type="text" id="qty" value="1" class="qty-input" /> <div class="button-wrap"> <button type="button" class="cstbtn plus">+</button> <button type="button" class="cstbtn minus">-</button> </div> </div> <div class="cost_final">$1.99</div> </div> <div class="del-btn"><img src="https://cdn1.iconfinder.com/data/icons/social-messaging-ui-color/254000/08-512.png" alt="delete" /></div> </div> <div class="product_header detail_product"> <div class="product-wrap"> <div class="title">Swim Short Medium</div> <div class="price">$1.99</div> <div class="text-box-wrap"> <input type="text" id="qty2" value="2" class="qty-input" /> <div class="button-wrap"> <button type="button" class="cstbtn plus">+</button> <button type="button" class="cstbtn minus">-</button> </div> </div> <div class="cost_final">$1.99</div> </div> <div class="del-btn"><img src="https://cdn1.iconfinder.com/data/icons/social-messaging-ui-color/254000/08-512.png" alt="delete" /></div> </div> <div class="product_header detail_product"> <div class="product-wrap"> <div class="title">Swim Short Medium</div> <div class="price">$1.99</div> <div class="text-box-wrap"> <input type="text" id="qty1" value="1" class="qty-input" /> <div class="button-wrap"> <button type="button" class="cstbtn plus">+</button> <button type="button" class="cstbtn minus">-</button> </div> </div> <div class="cost_final">$1.99</div> </div> <div class="del-btn"><img src="https://cdn1.iconfinder.com/data/icons/social-messaging-ui-color/254000/08-512.png" alt="delete" /></div> </div> <div class="product_header total"> <div class="product-wrap"> <div class="title">SubTotal<br/>VAT @20%</div> <div class="cost_final">$11.96<br/>$2.39</div> </div> </div> <div class="product_header"> <div class="product-wrap"> <div class="title">Total Cost</div> <div class="cost_final" style="float:right;">$14.35</div> </div> </div> <a href="#" class="buy-now">Buy Now &raquo</a> </div> </div> <script> $(document).ready(function() { $('.plus').click(function(){ var x = $(this).parent().parent().find('.qty-input').val(); if(x<10){ $(this).parent().parent().find('.qty-input').val(parseInt(x)+1); } }); $('.minus').click(function(){ var x = $(this).parent().parent().find('.qty-input').val(); if(x>1){ $(this).parent().parent().find('.qty-input').val(parseInt(x)-1); } }); $('.del-btn').click(function(){ $(this).parent().hide(); }) }); </script> </body> </html>
*{margin:0px;padding:0px;} .wrapper-max{max-width:800px;margin:0 auto;} .wrapper-in{width:100%;float:left; background:#e4e4e4 url(../images/bg.png) repeat-x top left;padding:15px;border:1px solid #000} .product_header{width:100%; float:left;} .product_header ul{margin:0px;padding:0px;list-style:none;} .product_header ul li{float:left;width:10%;padding:10px 15px 0px 15px;border-bottom:2px solid #a1a1a1;font-size:20px;font-family:"georgia";color:#000;} .product_header ul li:first-child{width:43%;} .product_header ul li:last-child{border:none;} .product_header.detail_product li{border:none;padding:10px 15px 10px 15px;} .text-box-wrap{width:100%;float:left;} .text-box-wrap .qty-input{width:80%;float:left;padding:9px 5px;box-sizing:border-box;text-align: right; font-weight: bold;} .button-wrap{width:19%;float:right;} .button-wrap .cstbtn{width: 15px; height: 15px; background: #999999; color: #fff; border: none; margin-left: 5px;vertical-align: top;} .product-wrap{width:95%;float:left;} .product-wrap .title{float:left;width:50%;padding:10px 0px 10px 15px;font-size:20px;font-family:"georgia";color:#000;line-height:40px;} .product-wrap .price{float:left;width:10%;padding:10px 15px 10px 15px;font-size:20px;font-family:"georgia";color:#000;line-height:40px;} .product-wrap .text-box-wrap{float:left;width:10%;padding:10px 15px 10px 15px;font-size:20px;font-family:"georgia";color:#000;} .product-wrap .cost_final{float:left;width:10%;padding:10px 15px 10px 15px;font-size:20px;font-family:"georgia";color:#000;line-height:40px;} .product-wrap:hover{background:#dddddd} .product_header.total{margin-top:25px;} .product_header.total .cost_final{float:right} .product_header.total .product-wrap:hover{ background:transparent;} .product_header.total .product-wrap .title{ color: #666666; font-size: 20px; line-height: 20px;} .product_header.total .product-wrap .cost_final{ color: #666666; font-size: 20px; line-height: 20px;} .buy-now{ float: right; background: #010066; padding: 13px 11px; color: #fff; text-decoration: none; border-radius: 11px; font-weight: bold; font-family: arial;margin:25px 0;margin-right: 30px;} .del-btn{margin-top:15px;cursor:pointer;} .del-btn img{width:25px;}

Related: See More

Paper Kit Pro
plus minus counter input
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class

Questions / Comments: