<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous"> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4 col-sm-offset-4"> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-dark btn-sm" id="minus-btn"><i class="fa fa-minus"></i></button> </div> <input type="number" id="qty_input" class="form-control form-control-sm" value="1" min="1"> <div class="input-group-prepend"> <button class="btn btn-dark btn-sm" id="plus-btn"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="col-sm-4"></div> </div> </div>

input { text-align: center; }

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