Multi column forms with fieldsets

Question

Sorry for the vague title  I wasn t sure how to describe it better  I m currently upgrading a website to bootstrap 3 and got a little problem with multiple inputs in one form row   In bootstrap 2  I would have simply created two  controls controls-row with  spanX elements inside to create the necessary columns  However  as these are removed in bootstrap 3  I replaced them with  form-group and the new column classes   If I have two rows inside the form  resp  fieldset in this case   the first one becomes non-editable if the second one is a one-column row  see code and attached screenshot below    I inspected the elements with firebug and saw that the  col-sm-12 from the second fieldset lays over the  form-group and does not let the user click the elements inside  In the first fieldset with the  col-sm-12 first  everything works fine   I also tried placing a  row around each  form-group which solves the issue  but increases the width of the form line  so it does no longer has a left margin inside the fieldset   Is there a way to solve this without increasing the form-row width   Thanks in advance   EDIT  I added the generated code as a jsFiddle   fieldset    legend  t   login information      form-group      col-sm-12         f label  login         f text field  login   class   gt   form-control    required   gt  true     form-group      col-sm-6         f label  password         f password field  password   class   gt   form-control       col-sm-6         f label  password confirmation         f password field  password confirmation   class   gt   form-control    fieldset    legend  t   personal details      form-group      col-sm-4         f label  title         f text field  title   class   gt   form-control       col-sm-4         f label  firstname         f text field  firstname   class   gt   form-control    required   gt  true      col-sm-4         f label  lastname         f text field  lastname    class   gt   form-control    required   gt  true     form-group      col-sm-12         f label  email         f text field  email   class   gt   form-control email    required   gt  true

User · Answer

I disagree that  form-group should be within  col- -n elements  In my experience  all the appropriate padding happens automatically when you use  form-group like  row within a form    lt div class  form-group  gt       lt div class  col-sm-12  gt           lt label for  user login  gt Username lt  label gt           lt input class  form-control  id  user login  name  user login   required  true  size  30  type  text    gt       lt  div gt   lt  div gt    Check out this demo   Altering the demo slightly by adding  form-horizontal to the form tag changes some of that padding    lt form action     method  post  class  form-horizontal  gt    Check out this demo   When in doubt  inspect in Chrome or use Firebug in Firefox to figure out things like padding and margins  Using  row within the form fails in edsioufi s fiddle because  row uses negative left and right margins thereby drawing the horizontal bounds of the divs classed  row beyond the bounds of the containing fieldsets

User · Answer

There are a couple of things that need to be adjusted in your layout    You are nesting col elements within form-group elements  This should be the other way around  the form-group should be within the col-sm-xx element   You should always use a row div for each new  row  in your design  In your case  you would need at least 5 rows  Username  Password and co  Title First Last name  email  Language   Otherwise  your problematic  col-sm-12 is still on the same row with the above 3  col-sm-4 resulting in a total of columns greater than 12  and causing the overlap problem    Here is a fixed demo   And an excerpt of what the problematic section HTML should become    lt fieldset gt       lt legend gt Personal Information lt  legend gt       lt div class  row  gt           lt div class  col-sm-4  gt                   lt div class  form-group  gt                   lt label for  user title  gt Title lt  label gt                   lt input class  form-control  id  user title  name  user title   size  30  type  text    gt               lt  div gt           lt  div gt           lt div class  col-sm-4  gt               lt div class  form-group  gt                   lt label for  user firstname  gt First name lt  label gt                   lt input class  form-control  id  user firstname  name  user firstname   required  true  size  30  type  text    gt               lt  div gt           lt  div gt           lt div class  col-sm-4  gt               lt div class  form-group  gt                   lt label for  user lastname  gt Last name lt  label gt                   lt input class  form-control  id  user lastname  name  user lastname   required  true  size  30  type  text    gt               lt  div gt           lt  div gt       lt  div gt       lt div class  row  gt           lt div class  col-sm-12  gt               lt div class  form-group  gt                    lt label for  user email  gt Email lt  label gt                   lt input class  form-control required email  id  user email  name  user email   required  true  size  30  type  text    gt               lt  div gt           lt  div gt       lt  div gt   lt  fieldset gt

[forms] Multi column forms with fieldsets

Examples related to forms

Examples related to twitter-bootstrap-3