I am building a form in Bootstrap, and I want that in the same row and the same column there are 2 inputs, one next to the other.
I tried with the class input-group
, with which I was able to add buttons and labels to the inputs, but when I put 2 inputs inside one, input-group
the second input goes below the first, and I want it to be next to the first and glued, as happens with the input-group-addon
.
How can that be achieved? Where possible using Bootstrap's own classes.
This is what I have so far
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="">Nro. remito</label>
<div class="input-group">
<input name="remitosucursal" id="remitosucursal" type="text" required class="form-control">
<input name="remitonumero" id="remitonumero" type="text" required class="form-control">
</div>
</div>
</div>
One option would be to add a
input-group-addon
between the fields and let Bootstrap take care of the styling.Another option if you don't want to add
input-group-addon
, would be to create your own styles (although I don't know if that's what you want from what you say in the question). Here is an example:Personally, I find it easier to accommodate by thinking of the column spaces at twelve,
One option is to use Inline forms .
I modified the example that you included in your question to use
Inline forms
(in the preview you will see that it appears in a single column, because it is the default ofExtra Small
, but it can be adjusted if you want the fields to be arranged horizontally even at that size):I leave you this alternative, hopefully it works for you:
If the textboxes are next to each other they will be placed in the same row, but not in the same column
You will notice that I place each
input
in adiv
different indicating acol-*-6
, I define a 6 to specify the 12 columnsgrid system
of thebootstrap
In the previous example, I proposed the solution that seemed best to me.
Input group - two inputs close to each other
But it is true that with
input-group-addon
it you could place text next to the control, but I have seen this more than anything to put some text (that is why it is applied in aspan
), not to align another controlWhat can also help you and is shorter is:
to be able to put two inputs on the same line