Input group - two inputs close to each other

Question

How can I make input group involves two inputs?

<div class="input-group">
    <input type="text" class="form-control" placeholder="MinVal">
    <input type="text" class="form-control" placeholder="MaxVal">
</div>

This doesn't work, they are horizontal instead of inline

User · Answer

Combining two inputs  where the group take up all width  100    and the size is not 50  - 50   no additional css  I made it nicely by the following code    x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class  container  gt  x000D       lt form gt  x000D           lt div class  form-group  gt  x000D               lt label gt Name lt  label gt  x000D               lt div class  input-group  style  width 100   gt  x000D                   lt span class  input-group-btn  style  width 100px   gt  x000D        lt select class  form-control  gt  x000D                        lt option gt Mr  lt  option gt  x000D                        lt option gt Mrs  lt  option gt  x000D                        lt option gt Dr lt  option gt  x000D                    lt  select gt  x000D       lt  span gt  x000D       lt input class  form-control  id  name  name  name  placeholder  Type your name  type  text  gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  form gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

working workaround    lt div class  input-group  gt       lt input type  text  class  form-control input-sm  value  test1    gt       lt span class  input-group-btn  style  width 0px   gt  lt  span gt       lt input type  text  class  form-control input-sm  value  test2    gt   lt  div gt    downside  no border-collapse between the two text-fields  but they keep next to each other  http   jsfiddle net EfC26   Update   thanks to Stalinko  This technique allows to glue more than 2 inputs   Border-collapsing is achieved using  margin-left  -1px   -2px for the 3rd input and so on    lt div class  input-group  gt     lt input type  text  class  form-control input-sm  value  test1    gt     lt span class  input-group-btn  style  width 0px   gt  lt  span gt     lt input type  text  class  form-control input-sm  value  test2  style  margin-left -1px    gt     lt span class  input-group-btn  style  width 0px   gt  lt  span gt     lt input type  text  class  form-control input-sm  value  test2  style  margin-left -2px    gt   lt  div gt    http   jsfiddle net yLvk5mn1 1

User · Answer

If you want to include a  Title  field within it that can be selected with the  lt select gt  HTML element  that too is possible  PREVIEW   CODE SNIPPET   lt div class  form-group  gt     lt div class  input-group input-group-lg  gt       lt div class  input-group-addon  gt         lt select gt           lt option gt Mr  lt  option gt           lt option gt Mrs  lt  option gt           lt option gt Dr lt  option gt         lt  select gt       lt  div gt       lt div class  input-group-addon  gt         lt span class  fa fa-user  gt  lt  span gt       lt  div gt       lt input type  text  class  form-control  placeholder  Name     gt     lt  div gt   lt  div gt

User · Answer

Assuming you want them next to each other      lt form action    class  form-inline  gt       lt div class  form-group  gt           lt input type  text  class  form-control  placeholder  MinVal  gt       lt  div gt       lt div class  form-group  gt                lt input type  text  class  form-control  placeholder  MaxVal  gt          lt  div gt   lt  form gt    JSFiddle  Update Nr 1  Should you want to use  input-group with this example    lt form action    class  form-inline  gt       lt div class  form-group  gt           lt div class  input-group  gt             lt span class  input-group-addon  gt   lt  span gt             lt input type  text  class  form-control  placeholder  Username  gt           lt  div gt       lt  div gt       lt div class  form-group  gt               lt div class  input-group  gt             lt input type  text  class  form-control  gt             lt span class  input-group-addon  gt  00 lt  span gt           lt  div gt       lt  div gt   lt  form gt    JSFiddle  The class  input-group is there to extend inputs with buttons and such  directly attached   Checkboxes or radio buttons are possible as well  I don t think it works with two input fields though    Update Nr  2  With  form-horizontal the  form-group tag basically becomes a  row tag so you can use the column classes such as  col-sm-8    lt form action    class  form-horizontal  gt       lt div class  form-group  gt           lt div class  col-sm-8  gt               lt input type  text  class  form-control  placeholder  MinVal  gt           lt  div gt           lt div class  col-sm-4  gt               lt input type  text  class  form-control  placeholder  MaxVal  gt           lt  div gt       lt  div gt   lt  form gt    Updated JSFiddle with all three examples

User · Answer

I was not content with any of the answers on this page, so I fiddled with this myself for a bit. I came up with the following

_x000D_

angular.module('showcase', []).controller('Ctrl', function() {_x000D_
  var vm = this;_x000D_
  vm.focusParent = function(event) {_x000D_
    angular.element(event.target).parent().addClass('focus');_x000D_
  };_x000D_
_x000D_
  vm.blurParent = function(event) {_x000D_
    angular.element(event.target).parent().removeClass('focus');_x000D_
  };_x000D_
});

_x000D_

.input-merge .col-xs-2,_x000D_
.input-merge .col-xs-4,_x000D_
.input-merge .col-xs-6 {_x000D_
  padding-left: 0;_x000D_
  padding-right: 0;_x000D_
}_x000D_
.input-merge div:first-child .form-control {_x000D_
  border-top-right-radius: 0;_x000D_
  border-bottom-right-radius: 0;_x000D_
}_x000D_
.input-merge div:last-child .form-control {_x000D_
  border-top-left-radius: 0;_x000D_
  border-bottom-left-radius: 0;_x000D_
}_x000D_
.input-merge div:not(:first-child) {_x000D_
  margin-left: -1px;_x000D_
}_x000D_
.input-merge div:not(:first-child):not(:last-child) .form-control {_x000D_
  border-radius: 0;_x000D_
}_x000D_
.focus {_x000D_
  z-index: 2;_x000D_
}

_x000D_

<html ng-app="showcase">_x000D_
_x000D_
<head>_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>_x000D_
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />_x000D_
</head>_x000D_
_x000D_
<body class="container">_x000D_
  <label class="control-label">Person</label>_x000D_
  <div class="input-merge" ng-controller="Ctrl as showCase">_x000D_
    <div class="col-xs-4">_x000D_
      <input class="form-control input-sm" name="initials" type="text" id="initials"_x000D_
             ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"_x000D_
             ng-model="person.initials" placeholder="Initials" />_x000D_
    </div>_x000D_
_x000D_
    <div class="col-xs-2">_x000D_
      <input class="form-control input-sm" name="prefixes" type="text" id="prefixes"_x000D_
             ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"_x000D_
             ng-model="persoon.prefixes" placeholder="Prefixes" />_x000D_
    </div>_x000D_
_x000D_
    <div class="col-xs-6">_x000D_
      <input class="form-control input-sm" name="surname" type="text" id="surname"_x000D_
             ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"_x000D_
             ng-model="persoon.surname" placeholder="Surname" />_x000D_
    </div>_x000D_
  </div>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

With this it is possible to set the width of the individual inputs to your liking. Also a minor issue with the above snippets was that the input looks incomplete when focussed or when it is not valid. I fixed this with some angular code, but you can just as easily do this with jQuery or native javascript or whatever.

The code adds the class .focus to the containing div's, so it can get a higher z-index then the others when the input is focussed.

User · Answer

With Bootstrap 4 1 I found a width solution by percentage   The following shows an input-group with 4 Elements  1 text an 3 selects - working well    x000D   x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  integrity  sha384-MCw98 SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO  crossorigin  anonymous  gt  x000D   x000D   lt div class  input-group input-group-sm  gt  x000D    lt div class  input-group-prepend  gt  x000D     lt div class  input-group-text  gt TEXT  lt  div gt  x000D    lt  div gt  x000D    lt select name  name1  id  name1  size  1  style  width 4    class  form-control  gt  x000D     lt option value    gt option lt  option gt  x000D     lt  -- snip -- gt  x000D    lt  select gt      x000D    lt select name  name2  id  name2  size  1  style  width 60    class  form-control  gt  x000D     lt option value    gt option lt  option gt  x000D     lt  -- snip -- gt  x000D    lt  select gt       x000D    lt select name  name3  id  name3  size  1  style  width 25    class  form-control  gt  x000D     lt option value    gt option lt  option gt  x000D     lt  -- snip -- gt  x000D    lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

It almost never makes intuitive sense to have two inputs next to each other without labels. Here is a solution with labels mixed in, which also works quite well with just a minor modification to existing Bootstrap styles.

Preview: enter image description here

HTML:

<div class="input-group">
  <span class="input-group-addon">Between</span>
  <input type="text" class="form-control" placeholder="Type something..." />
  <span class="input-group-addon" style="border-left: 0; border-right: 0;">and</span>
  <input type="text" class="form-control" placeholder="Type something..." />
</div>

CSS:

.input-group-addon {
  border-left-width: 0;
  border-right-width: 0;
}
.input-group-addon:first-child {
  border-left-width: 1px;
}
.input-group-addon:last-child {
  border-right-width: 1px;
}

JSFiddle: http://jsfiddle.net/yLvk5mn1/31/

User · Answer

My solution requires no additional css and works with any combination of input-addon, input-btn and form-control. It just uses pre-existing bootstrap classes

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>_x000D_
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />_x000D_
<form style="padding:10px; margin:10px" action="" class=" form-inline">_x000D_
  <div class="form-group">_x000D_
    <div class="input-group">_x000D_
    <div class="form-group">_x000D_
        <div class="input-group">_x000D_
          <input type="text" class="form-control" placeholder="MinVal">_x000D_
        </div>_x000D_
      </div>_x000D_
      <div class="form-group">_x000D_
        <div class="input-group">_x000D_
          <input type="text" class="form-control" placeholder="MaxVal">_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</form>

_x000D_

This will be inline if there is space and wrap for smaller screens.

Full Example ( input-addon, input-btn and form-control. )

jsfiddle

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>_x000D_
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />_x000D_
<form style="padding:10px; margin:10px" action="" class=" form-inline">_x000D_
  <div class="form-group">_x000D_
    <div class="input-group">_x000D_
      <div class="form-group">_x000D_
        <div class="input-group">_x000D_
          <span class="input-group-addon" id="basic-addon1">@</span>_x000D_
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">_x000D_
          <span></span>_x000D_
        </div>_x000D_
      </div>_x000D_
      <div class="form-group">_x000D_
        <div class="input-group">_x000D_
          <span></span>_x000D_
          <span class="input-group-addon" id="basic-addon1">@</span>_x000D_
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">_x000D_
          <span></span>_x000D_
        </div>_x000D_
      </div>_x000D_
      <div class="form-group">_x000D_
        <div class="input-group">_x000D_
          <span></span>_x000D_
          <span class="input-group-addon" id="basic-addon1">@</span>_x000D_
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">_x000D_
          <span></span>_x000D_
        </div>_x000D_
      </div>_x000D_
      <br>_x000D_
_x000D_
      <div class="form-group">_x000D_
        <div class="input-group">_x000D_
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">_x000D_
          <span></span>_x000D_
        </div>_x000D_
      </div>_x000D_
      <div class="form-group">_x000D_
        <div class="input-group">_x000D_
          <span></span>_x000D_
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</form>

_x000D_

User · Answer

To show more than one inputs inline without using  form-inline  class you can use the next code    lt div class  input-group  gt       lt input type  text  class  form-control  value  First input    gt       lt span class  input-group-btn  gt  lt  span gt       lt input type  text  class  form-control  value  Second input    gt   lt  div gt    Then using CSS selectors      To remove space between text inputs     input-group  gt   input-group-btn empty       width  0px      Basically you have to insert an empty span tag with  input-group-btn  class between input tags   If you want to see more examples of input groups and bootstrap-select groups take a look at this URL   http   jsfiddle net vkhusnulina gze0Lcm0

User · Answer

I have searched for this a few minutes and i couldn't find any working code.

But now i finaly did it ! Take a look:

<div class="input-group" id="unified-inputs">
<input type="text" class="form-control" placeholder="MinVal" />
<input type="text" class="form-control" placeholder="MaxVal" />
</div>

And css

#unified-inputs.input-group { width: 100%; }
#unified-inputs.input-group input { width: 50% !important; }
#unified-inputs.input-group input:last-of-type { border-left: 0; }

http://jsfiddle.net/4Ln8d7zq/)

User · Answer

Create a input-group-glue class with this:

_x000D_

.input-group-glue {_x000D_
  width: 0;_x000D_
  display: table-cell;_x000D_
}_x000D_
_x000D_
.input-group-glue + .form-control {_x000D_
  border-left: none;_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="input-group">_x000D_
  <input type="text" class="form-control" value="test1" />_x000D_
  <span class="input-group-glue"></span>_x000D_
  <input type="text" class="form-control" value="test2" />_x000D_
  <span class="input-group-glue"></span>_x000D_
  <input type="text" class="form-control" value="test2" />_x000D_
</div>

_x000D_

[twitter-bootstrap] Input group - two inputs close to each other

The answer is

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Tags