Decrease Bootstrap field size

Navigation
0

I want to decrease the size of the field but I can not, any help? follows a print 

<divclass="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>
    
asked by anonymous 07.12.2017 / 17:33

3 answers

0

See the fiddle

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

Nothing prevents you from using these classes within the same inputs, but their standardization looks better if you do it on the parent element.

See the grid concept of the bootstrap. But basically, each "row" is broken into 12 columns, and you can set the amount of columns used for each device interval (xs, sm, md, lg). In the fiddle, I left the size random for md, and all with 12 columns in the xs.

    
07.12.2017 / 18:31
0

Dude follows this example and will sort it according to what you need: 

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p>Pessoa Física</p>
            <div class="form-group">
                <label for="uf">UF</label>
                <select name="uf" id="uf">
                    <option value="SP"></option>
                    <option value="RJ"></option>
                    <option value="MG"></option>
                </select>
                <br>
                <label for="valor">Valor</label>
                <input type="text" class="form-control" id="valor">
            </div>
        </div>
        <div class="col-md-6">
            <p>Pessoa Jurídica</p>
            <div class="form-group">
                <label for="uf">UF</label>
                <select name="uf" id="uf">
                    <option value="SP"></option>
                    <option value="RJ"></option>
                    <option value="MG"></option>
                </select>
                <br>
                <label for="valor">Valor</label>
                <input type="text" class="form-control" id="valor">
            </div>
        </div>
    </div>
</div>
    
07.12.2017 / 18:47
0

You can decrease the size of the cols by remembering that the bootstrap grid has a maximum number of 12 columns, changing to a smaller column value than the current one. If you need to use a specific size, you can create a css class and enter the manual value, using! Important to overwrite the bootstrap class.

    
07.12.2017 / 19:10
Remove gradient Calendar with slide on days of the month