<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="container"> <h5 class="d-flex justify-content-between align-items-center"> <span>Your cart</span> <span class="badge badge-primary badge-pill counter">1</span> </h5> <div class="input-group spinner"> <div class="input-group-prepend"> <button class="btn text-monospace minus" type="button">-</button> </div> <input type="number" class="count form-control" min="0" max="10" step="1" value="1"> <div class="input-group-append"> <button class="btn text-monospace plus" type="button">+</button> </div> </div> </div>

.container { max-width: 200px; margin: 2rem auto; } .spinner * { text-align: center; } .spinner input::-webkit-outer-spin-button, .spinner input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .spinner input:disabled { background-color: white; }

$(document).ready(function() { min = 0; // Minimum of 0 max = 10; // Maximum of 10 $('.count').prop('disabled', true); $(".minus").on("click", function() { if ($('.count').val() > min) { $('.count').val(parseInt($('.count').val()) - 1 ); $('.counter').text(parseInt($('.counter').text()) - 1 ); } }); $(".plus").on("click", function() { if ($('.count').val() < max) { $('.count').val(parseInt($('.count').val()) + 1 ); $('.counter').text(parseInt($('.counter').text()) + 1 ); } }); });