How to change the color of only one element in a form-group with several others?

Question

Hello!

What happens to me is this:

I am using Bootstrap Validator to validate the fields in my form. However, when I rotate the page, the fields are getting as follows. Note that the "Code" field is disabled. Only "Social Reason" has been validated. I would like only this field to appear in red.

The problem is that I have to keep both fields in the same form-group to stay on the same line. Separating the fields into different form-groups, the color changes correctly, but the fields are misaligned. Below my HTML.

Is there any way to apply color only to the fields I wish?

Answer 1

To keep styling separate, you cannot use more than one form field within the element with the class form-group.

See in: http://getbootstrap.com/css/#Forms-inline. Even with each field in a "form-group", they are on the same line, in which case you can use an additional class for the fields that should be on separate lines.

Answer 2

Invert your code to look like this:

<div class="col-lg-2">
    <div class="form-group">
        <label></label>
        <input />
    </div>
</div>

<div class="col-lg-10">
    <div class="form-group">
        <label></label>
        <input />
    </div>
</div>

That way, you’ll have the colunas separate from the form-group and may validate separately inputs.

Answer 3

You will not apply color only to the fields you want - on the contrary, you will rule out the colors of the fields you do not want.

For this, you will add to the property excluded of bootstrapValidator the fields that are :disabled:

$(formSelector).bootstrapValidator({
    excluded: ':disabled'

    [...]
});

Answer 4

I believe you should create a separate CSS code for this field or remove CssClass="form-control" of txtCodigo.