Position 2 buttons side by side of an input

Question

I need to make a button like this for my site but I’m not getting?

How to do this in html and css and bootstrap? I even tried to do it like this, but it doesn’t work.

<div class="btn-group inline" role="group" aria-label="Basic example">
     <input type="button" class="btn btn-secondary" value="+">
     <input class="form-control" type="number" name="quantidade" onchange="preencheTotalProduto()" min="0" max="<?= $tamanho['estoque'];?>" value="0">
     <input type="button" class="btn btn-secondary" value="-">
</div>

Answer 1

Guy works pretty much just take the border-radius of input in the middle, for this use the native class rounded-0. In input vc tb can put the classes btn-default border to get closer to your drawing, I also defined a width on hand to be 4 characters wide, 4ch. Documentation https://getbootstrap.com/docs/4.3/utilities/borders/#border-Radius

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col mt-5">
            <div class="btn-group inline" role="group" aria-label="Basic example">
                <input type="button" class="btn btn-default border" value="+">
                <input style="width: 4ch" class="form-control rounded-0" type="number" name="quantidade" onchange="preencheTotalProduto()" min="0" max="<?= $tamanho['estoque'];?>" value="0">
                <input type="button" class="btn btn-default border" value="-">
            </div>
        </div>
    </div>
</div>

Answer 2

You can use the second mode, with css and js that control everything, and so that the buttons do not appear above and below if you use the input type text

$('.btn-number').click(function(e){
    e.preventDefault();
    
    fieldName = $(this).attr('data-field');
    type      = $(this).attr('data-type');
    var input = $("input[name='"+fieldName+"']");
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
        if(type == 'minus') {
            
            if(currentVal > input.attr('min')) {
                input.val(currentVal - 1).change();
            } 
            if(parseInt(input.val()) == input.attr('min')) {
                $(this).attr('disabled', true);
            }

        } else if(type == 'plus') {

            if(currentVal < input.attr('max')) {
                input.val(currentVal + 1).change();
            }
            if(parseInt(input.val()) == input.attr('max')) {
                $(this).attr('disabled', true);
            }

        }
    } else {
        input.val(0);
    }
});
$('.input-number').focusin(function(){
   $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {
    
    minValue =  parseInt($(this).attr('min'));
    maxValue =  parseInt($(this).attr('max'));
    valueCurrent = parseInt($(this).val());
    
    name = $(this).attr('name');
    if(valueCurrent >= minValue) {
        $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('O numero minimo foi alcançado');
        $(this).val($(this).data('oldValue'));
    }
    if(valueCurrent <= maxValue) {
        $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('O maximo numero foi alcançado');
        $(this).val($(this).data('oldValue'));
    }
    
    
});
$(".input-number").keydown(function (e) {
        //permite: backspace, delete, tab, escape, enter e .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        //verifica que seja um numero 
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });

    
    .center{
      width: 150px;
        margin: 40px auto;

      }

<html>
  <head>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

  
  </head>
  <body>
     <div class="center">
      <div class="input-group">
          <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quantidade">
                  <span class="glyphicon glyphicon-minus"></span>
              </button>
          </span>
          <input type="text" name="quantidade" class="form-control input-number" value="1" min="1" max="10">
          <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quantidade">
                  <span class="glyphicon glyphicon-plus"></span>
              </button>
          </span>
      </div>
     </div>
  </body>
</html>

Replace my code input with your :

 <input type="text" class="form-control input-number" name="quantidade" onchange="preencheTotalProduto()" min="0" max="<?= $tamanho['estoque'];?>" value="0">