Bootstrap 3 0 How to have text and input on same line

Question

I m currently switching my website over to Bootstrap 3 0   I m having an issue with form input and text formatting   What worked in Bootstrap 2 does not work in Bootstrap 3     How can I get text on the same line before and after a form input   I have narrowed it down to a problem with the  form-control  class in the Bootstrap 3 version of the example   How would I go about getting all the text and input on one line    I would like the bootstrap 3 example to look like the bootstrap 2 example in the jsfiddle   JS fiddle example   lt div class  container   gt     lt form gt         lt h3 gt  Format used to look like this in Bootstrap 2  lt  h3 gt         lt div class  row   gt             lt label for  return1  gt  lt b gt Return  lt  b gt  lt  label gt             lt input id  return1  name  return1  class   input input-sm  style  width 150px                   type  text  value  8 28 2013  gt             lt span id  return1  style  color blue  gt    - 14 Days lt  span gt         lt  div gt           lt br gt             lt br gt                 lt h3 gt  BootStrap 3 Version  lt  h3 gt          lt div class  row  gt             lt label for  return2  gt  lt b gt Return  lt  b gt  lt  label gt             lt input id  return2  name  return2  class  form-control input input-sm  style  width 150px                   type  text  value  8 28 2013  gt             lt span id  return2  style  color blue  gt    - 14 Days lt  span gt         lt  div gt     lt  form gt      Update  I change the code to this which works but having trouble with alignment now  Any ideas    lt div class  form-group  gt   lt div class  row  gt       lt div class  col-xs-3  gt           lt label for  class type  gt  lt h2 gt  lt span class   label label-primary  gt Class Type lt  span gt  lt  h2 gt  lt  label gt       lt  div gt       lt div class  col-xs-2  gt           lt select name  class type  id  class type  class    form-control input-lg  style  width 200px  autocomplete  off  gt               lt option  gt Economy lt  option gt               lt option  gt Premium Economy lt  option gt               lt option  gt Club World lt  option gt               lt option  gt First Class lt  option gt           lt  select gt       lt  div gt    lt  div gt

User · Answer

None of these worked for me  had to use  form-control-static class   http   getbootstrap com css  forms-controls-static

User · Answer

I would put each element that you want inline inside a separate col-md-  div within your row  Or force your elements to display inline  The form-control class displays block because that s the way bootstrap thinks it should be done

User · Answer

In Bootstrap 4 for Horizontal element you can use  row with  col- -  classes to specify the width of your labels and controls  see this link    And if you want to display a series of labels  form controls  and buttons on a single horizontal row you can use  form-inline for more info this link

User · Answer

just give mother of div  class  col-lg-12     lt div class  form-group  gt   lt div class  row  gt       lt div class  col-xs-3  gt           lt label for  class type  gt  lt h2 gt  lt span class   label label-primary  gt Class Type lt  span gt  lt  h2 gt  lt  label gt       lt  div gt       lt div class  col-xs-2  gt           lt select name  class type  id  class type  class    form-control input-lg  style  width 200px  autocomplete  off  gt               lt option  gt Economy lt  option gt               lt option  gt Premium Economy lt  option gt               lt option  gt Club World lt  option gt               lt option  gt First Class lt  option gt           lt  select gt       lt  div gt    lt  div gt    it will be   lt div class  form-group  gt   lt div class  col-lg-12  gt     lt div class  row  gt       lt div class  col-xs-3  gt           lt label for  class type  gt  lt h2 gt  lt span class   label label-primary  gt Class Type lt  span gt  lt  h2 gt  lt  label gt       lt  div gt       lt div class  col-xs-2  gt           lt select name  class type  id  class type  class    form-control input-lg  style  width 200px  autocomplete  off  gt               lt option  gt Economy lt  option gt               lt option  gt Premium Economy lt  option gt               lt option  gt Club World lt  option gt               lt option  gt First Class lt  option gt           lt  select gt       lt  div gt   lt  div gt   lt  div gt

User · Answer

You can do it like this    lt form class  form-horizontal  role  form  gt       lt div class  form-group  gt           lt label for  inputType  class  col-sm-2 control-label  gt Label lt  label gt           lt div class  col-sm-4  gt               lt input type  text  class  form-control  id  input  placeholder  Input text  gt           lt  div gt       lt  div gt   lt  form gt    Fiddle

User · Answer

The way I solved it was simply to add an override for all my textboxes on the main css of my site  as so    form-control       display initial  important

User · Answer

Or you can do this    lt table gt     lt tr gt       lt td gt  lt b gt Return  lt  b gt  lt  td gt       lt td gt  lt input id  return1  name  return1                 class   input input-sm  style  width 150px                type  text  value  8 28 2013  gt  lt  td gt     lt  tr gt   lt  table gt    I tried every one of the suggestions above and none of them worked   I don t want to pick a fixed number of columns in the 12 column grid   I want the prompt  and the input right after it  and I want the columns to stretch as needed   Yes  I know  that is against what bootstrap is all about   And you should NEVER use a table   Because DIV is so much better than tables    But the problem is that tables  rows  and cells actually WORK   YES - I REALLY DO know that there are CSS zealots  and the knee-jerk reaction is never never never use TABLE  TR  and TD   Yes  I do know that DIV class  table  with DIV class  row  and DIV class  cell  is much much better   Except when it doesn t work  and there are many cases  I don t believe that people should blindly ignore those situations   There are times that the TABLE TR TD will work just fine  and there is not reason to use a more complicated and more fragile approach just because it is considered more elegant   A developer should understand what the benefits of the various approaches are  and the tradeoffs  and there is no absolute rule that DIVs are better    Case in point - based on this discussion I converted a few existing tds and trs to divs  45 minutes messing about with it trying to get everything to line up next to each other and I gave up  TDs back in 10 seconds later - works - straight away - on all browsers  nothing more to do  Please try to make me understand - what possible justification do you have for wanting me to do it any other way   See  https   stackoverflow com a 4278073 1758051   And this     Layout should be easy  The fact that there are articles written on how to achieve a dynamic three column layout with header and footer in CSS shows that it is a poor layout system  Of course you can get it to work  but there are literally hundreds of articles online about how to do it  There are pretty much no such articles for a similar layout with tables because it s patently obvious  No matter what you say against tables and in favor of CSS  this one fact undoes it all  a basic three column layout in CSS is often called  The Holy Grail     https   stackoverflow com a 4964107 1758051   I have yet to see a way to force DIVs to always line up in a column in all situations   I keep getting shown trivial examples that don t really run into the problems      Responsive  is about providing a way that they will not always line up in a column   However  if you really want a column  you can waste hours trying to get DIV to work   Sometimes  you need to use appropriate technology no matter what the zealots say

User · Answer

What you need is the  form-inline class  You need to be careful though  with the new  form inline class you have to specify the width for each control    Take a look at this

User · Answer

Straight from documentation http   getbootstrap com css  forms-horizontal   Use Bootstrap s predefined grid classes to align labels and groups of form controls in a horizontal layout by adding  form-horizontal to the form  which doesn t have to be a  lt form gt    Doing so changes  form-groups to behave as grid rows  so no need for  row   Sample    lt form class  form-horizontal  gt     lt div class  form-group  gt       lt label for  inputEmail3  class  col-sm-2 control-label  gt Email lt  label gt       lt div class  col-sm-10  gt         lt input type  email  class  form-control  id  inputEmail3  placeholder  Email  gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt label for  inputPassword3  class  col-sm-2 control-label  gt Password lt  label gt       lt div class  col-sm-10  gt         lt input type  password  class  form-control  id  inputPassword3  placeholder  Password  gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt div class  col-sm-offset-2 col-sm-10  gt         lt div class  checkbox  gt           lt label gt             lt input type  checkbox  gt  Remember me          lt  label gt         lt  div gt       lt  div gt     lt  div gt     lt div class  form-group  gt       lt div class  col-sm-offset-2 col-sm-10  gt         lt button type  submit  class  btn btn-default  gt Sign in lt  button gt       lt  div gt     lt  div gt   lt  form gt

User · Answer

all please check the updated code as we have to use    form-control-static not only form-control   http   jsfiddle net tusharD 58LCQ 34   thanks with regards

[html] Bootstrap 3.0: How to have text and input on same line?

Examples related to html

Examples related to formatting

Examples related to twitter-bootstrap-3