.field_with_errors messes up bootstrap styled form

Question

I have used bootstrap 3's grid system to layout a simple sign up form. However, if a validation in Rails fails, the added div with the class "field_with_errors" messes up my layout.

Here's how a line in my form usually looks like:

<div class="form-group">
    <label class="col-xs-2 control-label" for="user_secondary_email">Secondary email</label>
    <div class="col-xs-4">
    <input class="form-control" id="user_secondary_email" name="user[secondary_email]" type="text" />
    </div>
</div>

When the validation fails the currently applied style looks like this:

<div class="form-group">
    <div class="field_with_errors"><label class="col-xs-2 control-label" for="user_primary_email">Primary email</label></div>
    <div class="col-xs-4">
        <div class="field_with_errors"><input class="form-control" id="user_primary_email" name="user[primary_email]" type="text" value="" /></div>
    </div>
</div>

I did some research and as far as I understand, this is how the code should look like:

<div class="form-group has-error">
        <label class="col-xs-2 control-label" for="user_secondary_number">Secondary number</label>
        <div class="col-xs-4">
            <input class="form-control" id="user_secondary_number" name="user[secondary_number]" type="text" />
        </div>
   </div>

What I don't understand is how I can get application to add the additional class to the correct html tag?

Any help is appreciated!

Answer 1

You probably haven't defined field_with_errors properly. In your css you should have code like this:

.field_with_errors {
  @extend .has-error;
}

Apart from that, your app behaves like it should. The code you expected (third code block of your question) is not correct, because none of the fields would be styled with field_with_errors-class. The problem lies in your css file. So if my solution doesn't work, post that file.