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

Answer 1

There are a couple of things that need to be adjusted in your layout:

1. 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).

2. 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:

    
Personal Information
    

        
    
            

                Title
                
            
        
        

            

                First name
                
            
        
        

            

                Last name
                
            
        
    
    

        

            


                Email