Bootstrap 3 Essential Training, Using validation styles

Bootstrap has a few styles that you can use related to validation. So let’s explore what you can do and how you can do this in a way that is sensible to users with disabilities. Now, I have just about the simplest form that you can create right here.

It’s really just an input of type=”text” as well as a label. Now, with Bootstrap, you can add a few classes that will determine the validation state, or at least show the validation state to the user, so in addition to adding this class of form-group here, we can also add a has-warning right here and you could see that this input field now gets a yellow border.  

There is also the has-error which shows up as red, and also has-success, which shows up as green. If you want the label to also be affected by this class, you have to add a control-label class here, so let me do that. We’ll say control-label, and now both the label as well as the input field will get that color, and let’s go ahead and try some of these other ones, so has-error, you’ll see that they’re both now red.

Leave a Reply

Notify of