CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
BernardoLima
BernardoLima

Reputation: 1141

How to apply .has-error directly in the input?

I would like to apply the class .has-error directly in the input, not in the parent div.

I've tried this:

<input type="text" name="nome" class="form-control has-error">

That class does not apply directly to the input, is there any other class that applies directly to the input?
Or must I create a new class that applies to inputs?

Upvotes: 1

Views: 6262

Answers (4)

AyushKatiyar
AyushKatiyar

Reputation: 1030

In the case of the project add

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

in the index.html file if not add in the same file

Upvotes: 0

Petr Šimek
Petr Šimek

Reputation: 61

  1. Locate has-error in your bootstrap.css
  2. Copy has-error section
  3. Remove spaces between has-error and next seclectors, e.g:

Before:


    .has-error .help-block,

After:


    .has-error.help-block,
  1. Paste copied section to your own css file. Example:

    /*
      Error styles for single error elements. Bootstrap allows error on control-group only
    */

    .has-error.help-block,
    .has-error.control-label,
    .has-error.radio,
    .has-error.checkbox,
    .has-error.radio-inline,
    .has-error.checkbox-inline,
    .has-error.radio label,
    .has-error.checkbox label,
    .has-error.radio-inline label,
    .has-error.checkbox-inline label {
      color: #cc0000;
    }
    .has-error.form-control {
      border-color: #cc0000;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }
    .has-error.form-control:focus {
      border-color: #990000;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3333;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3333;
    }
    .has-error.input-group-addon {
      color: #cc0000;
      border-color: #cc0000;
      background-color: #fff5cc;
    }
    .has-error.form-control-feedback {
      color: #cc0000;
    }
  1. Use like this: class="form-control has-error" on input or different element

Upvotes: 1

Dan
Dan

Reputation: 9488

This is built into bootstrap, you just have to add it to your form-group class, not your <input>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-6">
  <div class="form-group has-error">
    <input type="text" name="nome" class="form-control">
  </div>
</div>

Upvotes: 2

L_7337
L_7337

Reputation: 2748

There is not one built into Bootstrap.
If you want that exact functionality, you'll need to create it yourself. I prefer to stick with Bootstrap conventions, but if you have a good reason, then I would do it.

http://getbootstrap.com/css/

You could try btn-danger, but I don't think that is the functionality you are looking for. http://www.bootply.com/C6qAZdKYva

Glowing border: http://jsfiddle.net/yv9byt4b/

Upvotes: 4

Related Questions