How to group INPUTS in Bootstrap?

Asked

Viewed 782 times

1

I wanted the fields of RG, Shipping Body and UF together to add the fulfillment of the field CPF Above.

inserir a descrição da imagem aqui

html twitter-bootstrap
  • 2

    Post your code.

3 answers

2


Was used the class row of and column settings col-md-* and col-sm-* to work:

Sample code:

Visually in the answer has not 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>
<script src="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 Jsfiddle

Observing: In the documentation link there are other vestments if used on mobile phones and smaller devices.

References:

  • I would like the 3 fields to be on the same line RG, Shipping Body and UF

  • @Plumbers in the example is not as you want?

  • I took your code and modified it, so I got the expected result.

  • 1

    Instead of 8-2-2, I used 4-4-4 and managed to put the 3 fields on the same line... THANK YOU.

0

On the official Bootstrap website there is a small tutorial for this: "Individual form controls automatically receive some global style. All textual elements , and with . form-control is set to width: 100%; by default. Surround Labels and controls in . form-group for better spacing."

<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>

Remember that these classes will only work if you’re linking to Bootstrap css

  • I would like the 3 fields to be on the same line RG, Shipping Body and UF

0

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="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>

  • It is also correct, putting the number you need. I put as example 8 2 2 (up to the sum of 12 columns), but can follow any GRID of your preference. vlw

Browser other questions tagged html twitter-bootstrap

You are not signed in. Login or sign up in order to post.