Input group - two inputs close to each other

Question

How can I make input group involves two inputs    lt div class  input-group  gt       lt input type  text  class  form-control  placeholder  MinVal  gt       lt input type  text  class  form-control  placeholder  MaxVal  gt   lt  div gt    This doesn t work  they are horizontal instead of inline

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

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

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

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    HTML    lt div class  input-group  gt     lt span class  input-group-addon  gt Between lt  span gt     lt input type  text  class  form-control  placeholder  Type something       gt     lt span class  input-group-addon  style  border-left  0  border-right  0   gt and lt  span gt     lt input type  text  class  form-control  placeholder  Type something       gt   lt  div gt    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

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

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   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  http   netdna bootstrapcdn com bootstrap 3 0 0 js bootstrap min js  gt  lt  script gt  x000D   lt link href  http   netdna bootstrapcdn com bootstrap 3 0 0 css bootstrap min css  type  text css  rel  stylesheet    gt  x000D   lt form style  padding 10px  margin 10px  action    class   form-inline  gt  x000D     lt div class  form-group  gt  x000D       lt div class  input-group  gt  x000D       lt div class  form-group  gt  x000D           lt div class  input-group  gt  x000D             lt input type  text  class  form-control  placeholder  MinVal  gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  form-group  gt  x000D           lt div class  input-group  gt  x000D             lt input type  text  class  form-control  placeholder  MaxVal  gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   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   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  http   netdna bootstrapcdn com bootstrap 3 0 0 js bootstrap min js  gt  lt  script gt  x000D   lt link href  http   netdna bootstrapcdn com bootstrap 3 0 0 css bootstrap min css  type  text css  rel  stylesheet    gt  x000D   lt form style  padding 10px  margin 10px  action    class   form-inline  gt  x000D     lt div class  form-group  gt  x000D       lt div class  input-group  gt  x000D         lt div class  form-group  gt  x000D           lt div class  input-group  gt  x000D             lt span class  input-group-addon  id  basic-addon1  gt   lt  span gt  x000D             lt input type  text  class  form-control  placeholder  Username  aria-describedby  basic-addon1  gt  x000D             lt span gt  lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  form-group  gt  x000D           lt div class  input-group  gt  x000D             lt span gt  lt  span gt  x000D             lt span class  input-group-addon  id  basic-addon1  gt   lt  span gt  x000D             lt input type  text  class  form-control  placeholder  Username  aria-describedby  basic-addon1  gt  x000D             lt span gt  lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  form-group  gt  x000D           lt div class  input-group  gt  x000D             lt span gt  lt  span gt  x000D             lt span class  input-group-addon  id  basic-addon1  gt   lt  span gt  x000D             lt input type  text  class  form-control  placeholder  Username  aria-describedby  basic-addon1  gt  x000D             lt span gt  lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt br gt  x000D   x000D         lt div class  form-group  gt  x000D           lt div class  input-group  gt  x000D             lt input type  text  class  form-control  placeholder  Username  aria-describedby  basic-addon1  gt  x000D             lt span gt  lt  span gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  form-group  gt  x000D           lt div class  input-group  gt  x000D             lt span gt  lt  span gt  x000D             lt input type  text  class  form-control  placeholder  Username  aria-describedby  basic-addon1  gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

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   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   lt html ng-app  showcase  gt  x000D   x000D   lt head gt  x000D     lt script src  https   ajax googleapis com ajax libs angularjs 1 4 8 angular min js  gt  lt  script gt  x000D     lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet    gt  x000D   lt  head gt  x000D   x000D   lt body class  container  gt  x000D     lt label class  control-label  gt Person lt  label gt  x000D     lt div class  input-merge  ng-controller  Ctrl as showCase  gt  x000D       lt div class  col-xs-4  gt  x000D         lt 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    gt  x000D       lt  div gt  x000D   x000D       lt div class  col-xs-2  gt  x000D         lt 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    gt  x000D       lt  div gt  x000D   x000D       lt div class  col-xs-6  gt  x000D         lt 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    gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   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

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    lt div class  input-group  id  unified-inputs  gt   lt input type  text  class  form-control  placeholder  MinVal    gt   lt input type  text  class  form-control  placeholder  MaxVal    gt   lt  div gt    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   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   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  input-group  gt  x000D     lt input type  text  class  form-control  value  test1    gt  x000D     lt span class  input-group-glue  gt  lt  span gt  x000D     lt input type  text  class  form-control  value  test2    gt  x000D     lt span class  input-group-glue  gt  lt  span gt  x000D     lt input type  text  class  form-control  value  test2    gt  x000D   lt  div gt  x000D   x000D   x000D

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

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3