css – Add 2 inputs next to each other in the same column

Question:

I'm putting together a form in Bootstrap, and I want in the same row and the same column to have 2 inputs, one next to the other.

I tried with the input-group class, with which I could add buttons and labels to the inputs, but when I put 2 inputs inside an input-group the second input goes below the first one, and I want it to be next to the first and pasted , 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 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>

Answer:

One option would be to add an input-group-addon between the fields and let Bootstrap take care of the styles.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <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" placeholder="Sucursal">
          <span class="input-group-addon">-</span>
          <input name="remitonumero" id="remitonumero" type="text" required class="form-control" placeholder="Numero">
        </div>
      </div>
    </div>
  </div>
</div>

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:

.two-fields {
  width:100%;
}
.two-fields .input-group {
  width:100%;
}
.two-fields input {
  width:50% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-3">
      <div class="form-group two-fields">
        <label for="">Nro. remito</label>
        <div class="input-group">
          <input name="remitosucursal" id="remitosucursal" type="text" required class="form-control" placeholder="Sucursal">
          <input name="remitonumero" id="remitonumero" type="text" required class="form-control" placeholder="Numero">
        </div>
      </div>
    </div>
  </div>
</div>
Scroll to Top