Bootstrap 3 select input form inline

Question

I m trying to get input and select option inline attached with each other like this demo using Bootstrap 2  dead link    Following Bootstrap 3 guidelines I manage to do this    lt div class  container  gt       lt div class  col-sm-7 pull-right well  gt         lt form class  form-inline  action     method  get  gt           lt div class  form-group col-sm-5  gt             lt input class  form-control  type  text  value    placeholder  Search  name  q  gt           lt  div gt           lt div class  form-group col-sm-3  gt             lt select class  form-control  name  category  gt                 lt option gt select lt  option gt                 lt option gt 1 lt  option gt                 lt option gt 2 lt  option gt                 lt option gt 3 lt  option gt             lt  select gt           lt  div gt           lt button class  btn btn-primary col-sm-3 pull-right  type  submit  gt Search lt  button gt         lt  form gt       lt  div gt   lt  div gt    It s responsive  but input and select can t be attached without some nasty css hacks  I found lot of examples with attached buttons  but that does not work with select element

User · Answer

I know this is a bit old  but I had the same problem and my search brought me here  I wanted two select elements and a button all inline  which worked in 2 but not 3  I ended up wrapping the three elements in  lt form class  form-inline  gt     lt  form gt   This actually worked perfectly for me

User · Answer

Another different answer to an old question  However  I found a  implementation made specifically for bootstrap which might prove useful here  Hope this helps anybody who is looking     Bootstrap-select

User · Answer

Thanks to G money and other suggestions for this excellent solution to input-text with inline dropdown     here s another great solution    lt form class  form-inline  role  form  id  yourformID-form  action    method  post  gt       lt div class  input-group  gt           lt span class  input-group-addon  gt  lt i class  fa fa-male  gt  lt  i gt  lt  span gt            lt div class  form-group  gt               lt input size  50  maxlength  50  class  form-control  name  q  type  text  gt                     lt  div gt            lt div class  form-group  gt               lt select class  form-control  name  category  gt                   lt option value    gt  lt  option gt                   lt option value  0  gt select1 lt  option gt                   lt option value  1  gt select2 lt  option gt                   lt option value  2  gt select3 lt  option gt               lt  select gt                      lt  div gt       lt  div gt   lt  form gt    This works with Bootstrap 3  allowing input-text inline with a select dropdown  Here s what it looks like below

User · Answer

It requires a minor CSS addition to make it work with Bootstrap 3    x000D   x000D   input-group-btn last-child  gt   form-control   x000D    margin-left  -1px  x000D    width  auto  x000D    x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 css bootstrap css  rel  stylesheet   gt  x000D   x000D   lt div class  form-group  gt  x000D     lt div class  input-group  gt  x000D       lt input class  form-control  name  q  type  text  placeholder  Search  gt  x000D       x000D       lt div class  input-group-btn  gt  x000D         lt select class  form-control  name  category  gt  x000D           lt option gt select lt  option gt  x000D           lt option gt 1 lt  option gt  x000D           lt option gt 2 lt  option gt  x000D           lt option gt 3 lt  option gt  x000D         lt  select gt  x000D       lt  div gt  x000D       x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Based on spacebean s answer  this modification also changes the displayed text when the user selects a different item  just as a  lt select gt  would do    http   www bootply com VxVlaebtnL  HTML    lt div class  container  gt     lt div class  col-sm-7 pull-right well  gt       lt form class  form-inline  action     method  get  gt         lt div class  input-group col-sm-8  gt           lt input class  form-control  type  text  value    placeholder  Search  name  q  gt           lt div class  input-group-btn  gt             lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  lt span id  mydropdowndisplay  gt Choice 1 lt  span gt   lt span class  caret  gt  lt  span gt  lt  button gt             lt ul class  dropdown-menu  id  mydropdownmenu  gt               lt li gt  lt a href     gt Choice 1 lt  a gt  lt  li gt               lt li gt  lt a href     gt Choice 2 lt  a gt  lt  li gt               lt li gt  lt a href     gt Choice 3 lt  a gt  lt  li gt             lt  ul gt             lt input type  hidden  id  mydropwodninput  name  category  gt           lt  div gt  lt  --  btn-group -- gt         lt  div gt       lt button class  btn btn-primary col-sm-3 pull-right  type  submit  gt Search lt  button gt       lt  form gt     lt  div gt   lt  div gt    Jquery       mydropdownmenu  gt  li   click function e     e preventDefault      var selected     this  text          mydropwodninput   val selected         mydropdowndisplay   text selected

User · Answer

I think I ve accidentally found a solution  The only thing to do is inserting an empty  lt span class  input-group-addon  gt  lt  span gt  between the  lt input gt  and the  lt select gt    Additionally you can make it  invisible  by reducing its width  horizontal padding and borders    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class  input-group  gt  x000D       lt span class  input-group-addon  title    Price  id  priceLabel  gt Price lt  span gt  x000D       lt input type  number  id  searchbygenerals priceFrom  name  searchbygenerals priceFrom   required  required  class  form-control  value  0  gt  x000D       lt span class  input-group-addon  gt - lt  span gt  x000D       lt input type  number  id  searchbygenerals priceTo  name  searchbygenerals priceTo   required  required  class  form-control  value  0  gt  x000D     x000D       lt  -- insert this line -- gt  x000D       lt span class  input-group-addon  style  width 0px  padding-left 0px  padding-right 0px  border none   gt  lt  span gt  x000D     x000D       lt select id  searchbygenerals currency  name  searchbygenerals currency   class  form-control  gt  x000D           lt option value  1  gt HUF lt  option gt  x000D           lt option value  2  gt EUR lt  option gt  x000D       lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    Tested on Chrome and FireFox

User · Answer

I can t seem to make that work without hacks either  so what I did was just use the drop-down menu in place of a select box and send the info through a hidden field  like so  using your code    http   bootply com 93417  Jquery       dropdown-menu li   click function e   e preventDefault      var selected     this  text          category   val selected           HTML    lt div class  container  gt       lt div class  col-sm-7 pull-right well  gt         lt form class  form-inline  action     method  get  gt           lt div class  input-group col-sm-8  gt             lt input class  form-control  type  text  value    placeholder  Search  name  q  gt          lt div class  input-group-btn  gt           lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  gt Select  lt span class  caret  gt  lt  span gt  lt  button gt           lt ul class  dropdown-menu  gt             lt li gt  lt a href     gt 1 lt  a gt  lt  li gt             lt li gt  lt a href     gt 2 lt  a gt  lt  li gt             lt li gt  lt a href     gt 3 lt  a gt  lt  li gt           lt  ul gt            lt input type  hidden  name  category  class  category  gt         lt  div gt  lt  --  btn-group -- gt           lt  div gt           lt button class  btn btn-primary col-sm-3 pull-right  type  submit  gt Search lt  button gt         lt  form gt       lt  div gt   lt  div gt    Not sure if that will work for what you want  but it is an option for you

User · Answer

Can be done with pure Bootstrap code    x000D   x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 css bootstrap css  rel  stylesheet   gt  x000D   x000D   lt div class  form-group  gt  x000D     lt label for  id  class  col-md-2 control-label  gt ID lt  label gt  x000D     lt div class  input-group  gt  x000D       lt span class  input-group-btn  gt  x000D         lt select class  form-control  name  id  id  id  gt  x000D           lt option value    gt  x000D         lt  select gt  x000D       lt  span gt  x000D       lt span class  input-group-btn  gt  x000D         lt select class  form-control  name  nr  id  nr  gt  x000D           lt option value    gt  x000D         lt  select gt  x000D       lt  span gt  x000D     lt  div gt   x000D   lt  div gt   x000D   x000D   x000D

User · Answer

This is how I made it without extra css or jquery    lt div class  form-group  gt       lt div class  input-group  gt           lt label class  sr-only  for  extra3  gt Extra name 3 lt  label gt           lt input type  text  id  extra3  class  form-control  placeholder  Extra name  gt           lt span class  input-group-addon  gt               lt label class  checkbox-inline  gt                 Mandatory   lt input type  checkbox  id  inlineCheckbox5  value  option1  gt               lt  label gt           lt  span gt           lt span class  input-group-addon  gt                lt label class  checkbox-inline  gt                 Per person   lt input type  checkbox  id  inlineCheckbox6  value  option2  gt                lt  label gt           lt  span gt           lt span class  input-group-addon  gt              To be paid                lt select gt                   lt option value  online  gt Online lt  option gt                   lt option value  on spot  gt On Spot lt  option gt               lt  select gt           lt  span gt       lt  div gt   lt  div gt

[twitter-bootstrap] Bootstrap 3 select input form inline

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to html-select