Multi column forms with fieldsets

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:

<fieldset>
    <legend>Personal Information</legend>
    <div class="row">
        <div class="col-sm-4">    
            <div class="form-group">
                <label for="user_title">Title</label>
                <input class="form-control" id="user_title" name="userMulti column forms with fieldsets" size="30" type="text" />
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label for="user_firstname">First name</label>
                <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label for="user_lastname">Last name</label>
                <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">

                <label for="user_email">Email</label>
                <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
</fieldset>