1
00:00:00,420 --> 00:00:06,270
Bootstrap comes equipped with several form control states to control state is the style of your form

2
00:00:06,300 --> 00:00:07,180
element.

3
00:00:07,230 --> 00:00:13,780
Normally when some type of validation has been processed for example if a user successfully enters their

4
00:00:13,780 --> 00:00:21,020
email address in the right format you may display a success date to let them know they've done it correctly.

5
00:00:21,070 --> 00:00:26,170
On the other hand you may use an error state to indicate that the email has not been filled incorrectly.

6
00:00:27,210 --> 00:00:32,070
These are just a couple of examples but there are many more instances where form control states may

7
00:00:32,070 --> 00:00:42,000
be applied in this lesson we'll show you how to create control states in a horizontal form Leo to begin.

8
00:00:42,060 --> 00:00:44,550
We have the focused state.

9
00:00:44,550 --> 00:00:49,860
You can see the focus date activate when you click into the input the input highlights in Blue

10
00:00:54,570 --> 00:01:03,230
to create this we first need to create a form element in set the class to form horizontal and a rule

11
00:01:03,260 --> 00:01:07,030
attribute set to form.

12
00:01:07,090 --> 00:01:12,750
Next we create a div with class set to form group.

13
00:01:12,760 --> 00:01:18,490
Now we create a label with a class set two columns small two and control.

14
00:01:18,490 --> 00:01:18,940
Label

15
00:01:22,520 --> 00:01:28,910
the column small two means that this label will occupy two of the 12 available columns in the bootstrap

16
00:01:28,910 --> 00:01:30,240
grid label.

17
00:01:30,260 --> 00:01:34,590
That means that the input will occupy 10 of them.

18
00:01:34,650 --> 00:01:42,020
For this reason the next head the next tag we create is a div element with the class set two columns

19
00:01:42,020 --> 00:01:53,110
small 10 as you probably guessed this div element will contain the input create the input tag and set

20
00:01:53,110 --> 00:02:01,220
the class to form control by default bootstrap inputs will highlight when focused.

21
00:02:01,270 --> 00:02:05,230
For this reason there is no special class to put in for this control

22
00:02:08,980 --> 00:02:15,750
the next input is it is in a disabled state the coding for this input is the same as the last.

23
00:02:15,790 --> 00:02:23,740
The only difference is that we put a disabled attribute inside the input element to create the success

24
00:02:23,740 --> 00:02:34,400
form control create a div element and set the class to form group has access and as feedback next.

25
00:02:34,400 --> 00:02:42,390
Create your label with class set to call them to or call in small to rather and control.

26
00:02:42,400 --> 00:02:42,910
Label

27
00:02:46,730 --> 00:02:54,650
next Create Your did with class set to call them small 10 create your input with type set the text in

28
00:02:54,650 --> 00:02:56,150
class to form control

29
00:02:59,810 --> 00:03:06,330
to add a checkmark icon create a span element and set the class to graphic on Glyph account.

30
00:03:06,400 --> 00:03:09,850
OK and form control feedback

31
00:03:14,570 --> 00:03:20,930
a warning input can be created the same way as this excess input just change the areas that are highlighted

32
00:03:20,930 --> 00:03:21,560
on the screen

33
00:03:28,200 --> 00:03:33,780
and when you've completed that you can also create an error state in the same way and similarly you

34
00:03:33,780 --> 00:03:36,720
can update the areas highlighted on the screen.