Bootstrap 3 How to get two form inputs on one line and other inputs on individual lines

Question

I trying to format my registration page with Bootstrap 3 1 1   I would like the first two inputs to be on the same line while the other inputs are one there own line   I have played around with the bootstrap classes  row    form-inline   and  form-horizontal  to no avail   Does anybody know how to do it   Here is the Fiddle   lt style gt   reg name    max-width 200px     lt  style gt     lt form name  registration form  id  registration form  class  form-inline  gt            lt div class  form-group  gt               lt label for  firstname  class  sr-only  gt  lt  label gt               lt input id  firstname  class  form-control input-group-lg reg name  type  text  name  firstname                     title  Enter first name                     placeholder  First name   gt           lt  div gt            lt div class  form-group  gt               lt label for  lastname  class  sr-only  gt  lt  label gt               lt input id  lastname  class  form-control input-group-lg reg name  type  text  name  lastname                     title  Enter last name                     placeholder  Last name   gt           lt  div gt        lt div class  form-group  gt           lt label for  username  class  sr-only  gt  lt  label gt           lt input id  username  class  form-control input-group-lg  type  text  autocapitalize  off  name  username                 title  Enter username                 placeholder  Username   gt       lt  div gt        lt div class  form-group  gt           lt label for  password  class  sr-only  gt  lt  label gt           lt input id  password  class  form-control input-group-lg  type  password  name  password                 title  Enter password                 placeholder  Password   gt       lt  div gt     lt  form gt

User · Answer

I resorted to creating 2 style cascades using inline-block for input that pretty much override the field:

.input-sm {
    height: 2.1em;
    display: inline-block;
}

and a series of fixed sizes as opposed to %

.input-10 {
    width: 10em;
}

.input-32 {
    width: 32em;
}

User · Answer

Use  lt div class  row  gt  and  lt div class  form-group col-xs-6  gt   Here a fiddle  https   jsfiddle net core972 SMkZV 2

User · Answer

You can wrap the inputs in col-  classes   lt form name  registration form  id  registration form  class  form-horizontal  gt        lt div class  form-group  gt              lt div class  col-sm-6  gt                lt label for  firstname  class  sr-only  gt  lt  label gt                lt input id  firstname  class  form-control input-group-lg reg name  type  text  name  firstname  title  Enter first name  placeholder  First name  gt              lt  div gt                     lt div class  col-sm-6  gt                lt label for  lastname  class  sr-only  gt  lt  label gt                lt input id  lastname  class  form-control input-group-lg reg name  type  text  name  lastname  title  Enter last name  placeholder  Last name  gt              lt  div gt       lt  div gt  lt  -- form-group-- gt        lt div class  form-group  gt           lt div class  col-sm-12  gt             lt label for  username  class  sr-only  gt  lt  label gt             lt input id  username  class  form-control input-group-lg  type  text  autocapitalize  off  name  username  title  Enter username  placeholder  Username  gt           lt  div gt       lt  div gt  lt  -- form-group-- gt        lt div class  form-group  gt           lt div class  col-sm-12  gt           lt label for  password  class  sr-only  gt  lt  label gt           lt input id  password  class  form-control input-group-lg  type  password  name  password  title  Enter password  placeholder  Password  gt           lt  div gt       lt  div gt  lt  -- form-group-- gt    lt  form gt    http   bootply com 127825

User · Answer

You can code like two input box inside one div   lt div class  input-group  gt               lt span class  input-group-addon  gt  lt i class  glyphicon glyphicon-user  gt  lt  i gt  lt  span gt               lt input style  width 50    class  form-control   placeholder  first name   name  firstname  type  text    gt               lt input style  width 50    class  form-control   placeholder  lastname   name  lastname  type  text    gt           lt  div gt

[html] Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3