Decrease size Bootstrap field

Question

I want to reduce the size of the field but I’m not getting any help? follows a print

      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">


      <div class="container">

        <div class="row">        
         <label class="col-md-3 col-xs-12"><b>IEM9 Preço Médio</b></label>                       
        </div>

<div class="row">        
         <label class="col-md-3 col-xs-12"><b>Acesso menor ou igual a 512 kBps</b></label>                       
        </div>

<div class="row">
  <div class="col-xs-6 col-md-4">Pessoa Física</div>
  <div class="col-xs-6 col-md-4">Pessoa Jurídica</div>
</div>

<div class="row">   
  <div class="col-xs-6 col-md-4">
    <label class="col-md-3">UF</label>
<select name="IEM9_F_uf" id="IEM9_F_uf" class="form-control">
<option value>Estados</option>
<option value="<?php echo $estado; ?>" selected ><?php echo $estado; ?></option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AM">Amazonas</option>
<option value="AP">Amapá</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RO">Rondônia</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SE">Sergipe</option>
<option value="SP">São Paulo</option>
<option value="TO">Tocantins</option>
</select>

  </div>
  <div class="col-xs-6 col-md-4">

<label class="col-md-3">UF</label>
<select name="IEM9_J_uf" id="IEM9_J_uf" class="form-control ">
<option value>Estados</option>
<option value="<?php echo $estado; ?>" selected ><?php echo $estado; ?> </option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AM">Amazonas</option>
<option value="AP">Amapá</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ" >Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RO">Rondônia</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SE">Sergipe</option>
<option value="SP">São Paulo</option>
<option value="TO">Tocantins</option>
</select>

  </div>
</div>


<div class="row">
  <div class="col-xs-6 col-md-4">   
<label class="col-md-3">Valor</label>
<input type="text" size="21" maxlength="21"  value="<?php if($valor_iem9_f_a !=NULL){echo formato_numerico($valor_iem9_f_a);} else {echo "0,00";}?>" class="form-control decimal" name="IEM9_F_a" id="IEM9_F_a" title="Preço médio para conexões com velocidade de acesso menor ou igual a 512 kBps">
  </div>

  <div class="col-xs-6 col-md-4">
<label class="col-md-3">Valor</label>
<input type="text" size="21" maxlength="21"  value="<?php if($valor_iem9_j_a !=NULL){echo formato_numerico($valor_iem9_j_a);} else {echo "0,00";}?>" class="form-control decimal" name="IEM9_J_a" id="IEM9_J_a" title="Preço médio para conexões com velocidade de acesso menor ou igual a 512 kBps">

  </div>
</div>

Answer 1

You can decrease the size of the cols, remembering that the bootstrap grid has a maximum number of 12 columns, changing for a lower column value than the current one. If you need to use a specific size, you can create a css class and insert the manual value using ! Port to override bootstrap class.

Answer 2

See the fiddle

Notice the classes that are following the form-group class. They will define the size of the content within it, including inputs.

Nothing prevents you from using these classes within the inputs themselves, but their standardization is better done in the parent element.

See the concept of grid bootstrap. But basically, each "Row" is broken into 12 columns, and you can set the amount of columns used for each device range (Xs, Sm, Md, lg). In the fiddle, I randomized the size for Md, and all with 12 columns in Xs.

Answer 3

Just to complement the answers cited by other colleagues, we can also change the size of the input and select by changing their form-control classes (native Bootstrap class). See the examples below:

<!-- Tamanho dos inputs -->

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<!-- Tamanho dos selects -->

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

• Where lg and Sm determine the size of buttons.

The response was based on bootstrap documentation: Link