How to group INPUTS in Bootstrap?

Navigation
0

I wanted the RG, Dispatcher and UF fields together to add up to the CPF Up field.

    
asked by anonymous 26.12.2016 / 15:15

3 answers

1

class % of the bootstrap was used and settings of the row and col-md-* columns to work:

Sample code:

Visually in the response you do not have to check, but in a larger region it fits the way you expect. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row"> 
  <div class="form-group col-md-12 col-sm-12">
    <label for="exampleInputEmail1">CPF</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="CPF">
  </div>
</div>
<div class="row">
  <div class="form-group col-md-8 col-sm-8">
    <label for="exampleInputEmail1">RG</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="RG">
  </div>
  <div class="form-group col-md-2 col-sm-2">
    <label for="exampleInputEmail1">Orgão Expedidor</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Orgão Expedidor">
  </div>
  <div class="form-group col-md-2 col-sm-2">
    <label for="exampleInputEmail1">UF</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="UF">
  </div>
</div>

An example in the JsFiddle

Note > there are other features for use on mobile phones and smaller devices.

References:

26.12.2016 / 15:29
0

On the official Bootstrap website there is a small tutorial for this: "Individual form controls automatically receive some global style, all text, and .form-control elements are set to width: 100%, by default, wrap labels and controls in .form-group for better spacing. p> 

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Endereço de e-mail</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Senha</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Enviar</button>
</form>

Remembering that these classes will only work if you are linking to the Bootstrap css

    
26.12.2016 / 15:23
0

I did the following: I put <div class="form-group col-md-4 col-sm-4"> in all 3 fields. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
<div class="row">
  <div class="form-group col-md-4 col-sm-4">
    <label for="exampleInputEmail1">RG</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="RG">
  </div>
  <div class="form-group col-md-4 col-sm-4">
    <label for="exampleInputEmail1">Orgão Expedidor</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Orgão Expedidor">
  </div>
  <div class="form-group col-md-4 col-sm-4">
    <label for="exampleInputEmail1">UF</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="UF">
  </div>
</div>
</div>
    
26.12.2016 / 15:43
How to upload BD backup to the server using Okhttp? AR and Sedex check digit of the post office [closed]