Bootstrap comes equipped with several form control states to control state is the style of your form
element.
Normally when some type of validation has been processed for example if a user successfully enters their
email address in the right format you may display a success date to let them know they've done it correctly.
On the other hand you may use an error state to indicate that the email has not been filled incorrectly.
These are just a couple of examples but there are many more instances where form control states may
be applied in this lesson we'll show you how to create control states in a horizontal form Leo to begin.
We have the focused state.
You can see the focus date activate when you click into the input the input highlights in Blue
to create this we first need to create a form element in set the class to form horizontal and a rule
attribute set to form.
Next we create a div with class set to form group.
Now we create a label with a class set two columns small two and control.
Label
the column small two means that this label will occupy two of the 12 available columns in the bootstrap
grid label.
That means that the input will occupy 10 of them.
For this reason the next head the next tag we create is a div element with the class set two columns
small 10 as you probably guessed this div element will contain the input create the input tag and set
the class to form control by default bootstrap inputs will highlight when focused.
For this reason there is no special class to put in for this control
the next input is it is in a disabled state the coding for this input is the same as the last.
The only difference is that we put a disabled attribute inside the input element to create the success
form control create a div element and set the class to form group has access and as feedback next.
Create your label with class set to call them to or call in small to rather and control.
Label
next Create Your did with class set to call them small 10 create your input with type set the text in
class to form control
to add a checkmark icon create a span element and set the class to graphic on Glyph account.
OK and form control feedback
a warning input can be created the same way as this excess input just change the areas that are highlighted
on the screen
and when you've completed that you can also create an error state in the same way and similarly you
can update the areas highlighted on the screen.