<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 ----------> <div class="qty mt-5"> <span class="minus bg-dark">-</span> <input type="number" class="count" name="qty" value="1"> <span class="plus bg-dark">+</span> </div>

.qty .count { color: #000; display: inline-block; vertical-align: top; font-size: 25px; font-weight: 700; line-height: 30px; padding: 0 2px ;min-width: 35px; text-align: center; } .qty .plus { cursor: pointer; display: inline-block; vertical-align: top; color: white; width: 30px; height: 30px; font: 30px/1 Arial,sans-serif; text-align: center; border-radius: 50%; } .qty .minus { cursor: pointer; display: inline-block; vertical-align: top; color: white; width: 30px; height: 30px; font: 30px/1 Arial,sans-serif; text-align: center; border-radius: 50%; background-clip: padding-box; } div { text-align: center; } .minus:hover{ background-color: #717fe0 !important; } .plus:hover{ background-color: #717fe0 !important; } /*Prevent text selection*/ span{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } input{ border: 0; width: 2%; } nput::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input:disabled{ background-color:white; }

$(document).ready(function(){ $('.count').prop('disabled', true); $(document).on('click','.plus',function(){ $('.count').val(parseInt($('.count').val()) + 1 ); }); $(document).on('click','.minus',function(){ $('.count').val(parseInt($('.count').val()) - 1 ); if ($('.count').val() == 0) { $('.count').val(1); } }); });