My bootstrap form has two un-clickable inputs, can't figure out why

Question

I have a bootstrap 3 form.

when its in the tabled and larger media query state, the middle input field is somehow overlaying the two inputs above making them none clickable jsfiddle.net/wT7gp/.

I have put an example in jsfiddle. (remember to make it wide enough to see the problem)

Repro: Open link. make the outwindow large. click the input for firstname.

Expected it to start typing state, but nothing happens.

Hope someone here can explan what I did to cause it :) I failed at finding the issue. (other then yes the middle element is overlaying the two others.

Answer 1

You should be wrapping your rows of form groups in div with row class like so:
Fiddle: http://jsfiddle.net/wT7gp/1/
HTML

<div class="row">
    <div class="form-group  col-sm-6">
        <input class="form-control input-lg " placeholder="First Name" id="first-name" tabindex="1" name="FirstName" data-bind="value: firstName" type="text" maxlength="50" />
        <label for="first-name" style="display:none;" data-bind="validationMessage: firstName, css: { error: !firstName.isValid() }" class="error"></label>
    </div>

    <div class=" form-group col-sm-6">
        <input class="form-control input-lg " placeholder="Last Name" id="last-name" tabindex="2" name="LastName" data-bind="value: lastName" type="text" maxlength="50" />
        <label for="last-name" style="display:none;" data-bind="validationMessage: lastName, css: { error: !lastName.isValid() }" class="error"></label>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 form-group">
        <input class="form-control input-lg " placeholder="Email" id="email" tabindex="3" name="Email" data-bind="value: email" type="email" maxlength="50" />
        <label for="email" style="display:none;" data-bind="validationMessage: email, css: { error: !email.isValid() }" class="error"></label>
    </div>
</div>
<div class="row">
    <div class="col-sm-6 form-group">
        <input class="form-control input-lg " placeholder="Choose a password" id="password1" tabindex="4" name="Password" data-bind="value: password" type="password" />
        <label for="@Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: password    , css: { error: !password.isValid() }" class="error"></label>

    </div>
    <div class="col-sm-6 form-group">
        <input class="form-control input-lg " placeholder="password, again" id="password2" tabindex="5" name="ConfirmPassword" data-bind="value: confirmPassword" type="password" />
        <label for="@Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: confirmPassword   , css: { error: !confirmPassword.isValid() }" class="error"></label>

    </div>
</div>