WEBVTT

00:00:07.350 --> 00:00:14.180
Learn how to read validations styles to form controls in Bootstrap.

00:00:14.610 --> 00:00:16.530
So very very different styles.

00:00:16.530 --> 00:00:24.600
They used to style some specific states like success States or a warning state and we can use them to

00:00:24.600 --> 00:00:27.510
style inputs like text inputs.

00:00:27.510 --> 00:00:34.070
So what are we going to do now he's just going to create a simple text inputs.

00:00:34.110 --> 00:00:34.510
What are we.

00:00:34.530 --> 00:00:38.730
This one is of a line break.

00:00:40.200 --> 00:00:41.850
OK.

00:00:42.590 --> 00:00:45.320
Who is in the line.

00:00:45.360 --> 00:00:51.240
Are we going to do just going to create a text input.

00:00:52.510 --> 00:01:03.570
OK so the tide is going to be text and he's giving a class form control

00:01:06.570 --> 00:01:06.990
and

00:01:10.460 --> 00:01:21.750
he's also give us an ID fixe in which one is going to be creating other other ones and also a placeholder

00:01:23.530 --> 00:01:27.050
text in foods 1.

00:01:27.870 --> 00:01:28.630
OK so let's

00:01:32.260 --> 00:01:34.210
create another one.

00:01:35.150 --> 00:01:36.210
OK.

00:01:36.330 --> 00:01:38.160
Before we do that let's have a label

00:01:43.090 --> 00:01:46.710
for employees one

00:01:49.600 --> 00:01:52.450
six.

00:01:52.570 --> 00:01:53.870
Which one

00:01:58.750 --> 00:02:07.360
day do the same thing.

00:02:11.700 --> 00:02:14.240
Another couple of text inputs.

00:02:14.250 --> 00:02:14.670
So

00:02:17.620 --> 00:02:21.600
next with two and then takes input three

00:02:21.600 --> 00:02:32.200
.

00:02:32.610 --> 00:02:35.190
OK.

00:02:37.920 --> 00:02:38.410
OK.

00:02:38.580 --> 00:02:44.820
So now let's add a validation styling to the first text input.

00:02:44.950 --> 00:02:56.780
So first thing we will need to place the inputs inside another div and then we're going to give does

00:02:57.170 --> 00:02:58.590
have a specific class.

00:02:58.650 --> 00:03:11.610
OK so it's copy the inputs and places inside a div and then this div is going to have a special class

00:03:11.610 --> 00:03:12.050
.

00:03:12.060 --> 00:03:17.650
So first of all that's the form group class.

00:03:17.670 --> 00:03:18.770
OK let's.

00:03:19.100 --> 00:03:22.640
This place both the label.

00:03:24.180 --> 00:03:32.730
Let's use first default form group class as we have done earlier with the label and the inputs inside

00:03:32.850 --> 00:03:34.740
the form group.

00:03:35.400 --> 00:03:36.020
OK.

00:03:36.220 --> 00:03:43.720
And then let's use the validation style class.

00:03:43.890 --> 00:03:51.160
So let's say we want to go for a success States for these inputs.

00:03:51.270 --> 00:03:58.200
So the class we are going to use is going to be has success.

00:03:59.760 --> 00:04:00.480
We can see

00:04:03.750 --> 00:04:08.260
how these tiles are using the green color for the border of the inputs.

00:04:08.310 --> 00:04:08.900
OK.

00:04:09.170 --> 00:04:16.380
Because the same thing for the next for the second input so let's place the label and the inputs inside

00:04:16.440 --> 00:04:17.460
a form group

00:04:26.810 --> 00:04:34.120
first and then let's have a warning States for this one on an error Error States.

00:04:34.130 --> 00:04:36.410
It's going to be Haaz error.

00:04:36.840 --> 00:04:40.970
Ok so you can see how that is styled OK and

00:04:50.840 --> 00:05:00.650
then the final one let's do the same think is place the label and the inputs inside a fun group and

00:05:00.760 --> 00:05:02.240
on

00:05:04.840 --> 00:05:10.900
a class for a wanting say it's is going to be has won.

00:05:12.200 --> 00:05:15.530
OK.

00:05:17.950 --> 00:05:24.140
All right.

00:05:26.680 --> 00:05:28.780
Just a quick comment regarding labels.

00:05:28.780 --> 00:05:38.050
It is a good practice to provide a label for every single inputs in our form mainly for accessibility

00:05:38.200 --> 00:05:47.080
reasons and to help with assistive technologies but if we if we don't want our labels to appear on the

00:05:47.080 --> 00:05:50.640
page there is a class we can use with labels.

00:05:51.010 --> 00:05:51.430
It's

00:05:56.810 --> 00:06:06.670
as our only it's close to the first impers. label is our only.

00:06:06.730 --> 00:06:10.650
Now you can see that the label doesn't appear.

00:06:10.940 --> 00:06:14.600
OK so let's do the same thing.

00:06:15.400 --> 00:06:16.360
The other labels

00:06:20.680 --> 00:06:22.880
.

00:06:25.460 --> 00:06:34.950
And also let's see how to style labels using the Selby's was using the grid system.

00:06:34.990 --> 00:06:35.770
So are you going to do.

00:06:35.780 --> 00:06:39.050
We're going to place all the divs.

00:06:39.580 --> 00:06:40.260
OK.

00:06:40.390 --> 00:06:44.330
Inside a row.

00:06:44.610 --> 00:06:44.910
OK.

00:06:44.920 --> 00:06:46.380
On a day of class row.

00:06:46.720 --> 00:06:48.470
So it selects all of them

00:06:51.420 --> 00:06:52.440
.

00:06:57.020 --> 00:07:02.890
And copy paste them inside the div

00:07:05.560 --> 00:07:06.910
class.

00:07:07.480 --> 00:07:16.150
And then each day we're going to add a class to each of these days showing the number of columns we'd

00:07:16.150 --> 00:07:19.550
like to like them to occupy.

00:07:19.800 --> 00:07:23.660
So let's go for extra small devices.

00:07:24.010 --> 00:07:28.560
So we're going to use the plus column x as.

00:07:28.630 --> 00:07:34.380
So let's say the first input is going to take two columns for the way.

00:07:35.680 --> 00:07:47.230
The second one is going to be let's go for six columns.

00:07:47.230 --> 00:07:51.460
And the third one let's go for

00:07:56.020 --> 00:07:57.740
four columns.

00:07:58.360 --> 00:08:00.790
OK.

00:08:01.750 --> 00:08:01.940
OK.

00:08:01.960 --> 00:08:04.570
There are other classes we can use to

00:08:07.480 --> 00:08:10.810
size the input itself so.

00:08:10.950 --> 00:08:12.280
So let's say we want to make

00:08:15.930 --> 00:08:18.940
these inputs small.

00:08:18.940 --> 00:08:26.500
So the class we can use that is input small.

00:08:26.860 --> 00:08:30.470
They are said they can see how the size change with us.

00:08:30.880 --> 00:08:31.810
We can use

00:08:38.560 --> 00:08:41.050
another class.

00:08:41.880 --> 00:08:44.210
It puts large.

00:08:44.640 --> 00:08:47.550
You can see how this one change and also

00:08:51.830 --> 00:08:54.900
the other class we can use.

00:08:55.360 --> 00:08:59.100
So for instance we can use the class.

00:08:59.860 --> 00:09:01.630
Let's go for the first inputs.

00:09:01.740 --> 00:09:05.460
The class called them lunch

00:09:10.530 --> 00:09:17.810
and you don't see any but now because we are already in the preseason.

00:09:19.960 --> 00:09:22.220
OK.

00:09:24.280 --> 00:09:33.860
OK now we're going to move to something else we're going to learn how to add an icon to a text input

00:09:33.870 --> 00:09:34.230
.

00:09:34.390 --> 00:09:36.610
So let's just create another

00:09:39.580 --> 00:09:41.050
simple text inputs

00:09:44.740 --> 00:09:46.810
and is just copy paste one of these

00:09:52.900 --> 00:09:59.570
is have a library and then the horizontal line.

00:10:00.500 --> 00:10:03.420
OK.

00:10:11.850 --> 00:10:25.140
It people on the phone group and he's going to be six for us to show the label and also these

00:10:27.930 --> 00:10:33.640
16 words.

00:10:38.580 --> 00:10:39.790
OK.

00:10:39.840 --> 00:10:41.460
So now we're trying.

00:10:41.790 --> 00:10:42.750
We were going to do.

00:10:42.750 --> 00:10:44.280
We're going to add a.

00:10:44.490 --> 00:10:45.060
And I can

00:10:47.910 --> 00:10:49.760
write all the text inputs.

00:10:50.330 --> 00:10:50.660
OK.

00:10:50.670 --> 00:10:53.260
Over here.

00:10:54.050 --> 00:10:55.260
So what we need to do

00:10:59.100 --> 00:11:08.820
we need to add a span elements following the inputs and inside the spun elements we can have our eye

00:11:08.860 --> 00:11:09.650
on.

00:11:10.340 --> 00:11:14.380
We're going to use a leaf icon for that.

00:11:15.270 --> 00:11:19.350
So first let's create our span.

00:11:21.180 --> 00:11:22.110
OK.

00:11:22.770 --> 00:11:23.250
And

00:11:27.750 --> 00:11:30.890
we're going to give this man a glass.

00:11:32.100 --> 00:11:36.870
OK.

00:11:42.330 --> 00:11:48.300
So he's going to be believe icon for all by the name of the icon.

00:11:48.300 --> 00:11:54.870
So in order to get that we're going to go to the bootstrap Web sites

00:11:59.350 --> 00:12:01.350
then we're going to go to the

00:12:04.590 --> 00:12:09.240
components OK and we can see here the gift cards.

00:12:09.510 --> 00:12:20.540
So let's go for and let's see if I can we could do a control and search for alerts and you can see this

00:12:20.540 --> 00:12:21.040
graphic.

00:12:21.050 --> 00:12:23.270
So let's use this one.

00:12:23.310 --> 00:12:25.230
Copy paste is

00:12:31.430 --> 00:12:35.460
OK.

00:12:38.850 --> 00:12:40.370
And we need other another class.

00:12:40.380 --> 00:12:44.430
It's going to be form control feedback

00:12:52.530 --> 00:12:58.130
and we need to add a glass to our diff.

00:12:58.260 --> 00:13:02.760
It's going to be has feedback.

00:13:03.300 --> 00:13:05.200
I know we can see our eye on that.

00:13:05.340 --> 00:13:05.970
OK.

00:13:06.150 --> 00:13:17.010
We can also add a warning state to the inputs just by using the Haaz wanting gloves and now you can

00:13:17.010 --> 00:13:21.120
see the color of the icon has changed.

00:13:21.760 --> 00:13:24.030
OK.

00:13:26.010 --> 00:13:26.220
OK.

00:13:26.220 --> 00:13:37.070
Also we would need to add another spam with text.

00:13:37.650 --> 00:13:42.300
So this text is not going to appear so it's going to be wanting.

00:13:42.660 --> 00:13:49.940
We can do this mainly for assistive technologies like screen readers.

00:13:50.070 --> 00:13:53.270
OK.

00:13:53.370 --> 00:14:00.060
It's going to make it easy to convey the meaning of our icon for those technologies but we need to use

00:14:00.060 --> 00:14:06.580
the glass as our only so that's the this text doesn't show up.

00:14:06.830 --> 00:14:07.680
OK.

00:14:08.480 --> 00:14:13.290
So now we've got our text input with the alerts icon.

00:14:14.490 --> 00:14:19.730
OK so let's go for another example and this time we're going to create a text input.

00:14:19.960 --> 00:14:27.210
But we're going to add we're going to have by an add on with some text in it's ok.

00:14:27.270 --> 00:14:33.020
And also we can have some kind of phone control feedback.

00:14:33.930 --> 00:14:41.570
We can have like a success label for example great success icon for instance.

00:14:41.730 --> 00:14:52.060
So let's go for that so we can copy paste this we know of library

00:14:57.850 --> 00:15:00.270
horizontally.

00:15:01.320 --> 00:15:04.460
OK so it is time.

00:15:05.970 --> 00:15:06.740
OK.

00:15:06.780 --> 00:15:12.020
So rather than husbanding let's go for has success.

00:15:12.680 --> 00:15:13.360
OK.

00:15:13.780 --> 00:15:17.430
And rather than using

00:15:21.490 --> 00:15:25.130
an alert icon we're going to use.

00:15:25.140 --> 00:15:28.030
OK I got you.

00:15:28.620 --> 00:15:32.550
OK so now as we said we want to add another add on.

00:15:32.550 --> 00:15:39.500
So let's say at the beginning we want to have some text for example at.

00:15:40.800 --> 00:15:43.950
So we're going to do so inside our

00:15:48.180 --> 00:15:52.730
inputs or just before the inputs we get to add eight spun elements.

00:15:53.230 --> 00:15:53.400
OK

00:15:56.790 --> 00:15:59.630
we had six in it.

00:16:00.570 --> 00:16:04.850
And are we going to give this span a class.

00:16:06.300 --> 00:16:14.220
But before we do that if we if we have an I don't like this one to the inputs it's not going to work

00:16:14.310 --> 00:16:16.050
with a form group.

00:16:16.320 --> 00:16:22.470
So we need to change declasse we're using here to an input group rather than a form group.

00:16:22.490 --> 00:16:28.200
OK so we're going to do will change these two inputs.

00:16:28.260 --> 00:16:31.940
Group Okay.

00:16:32.460 --> 00:16:39.490
And then our spend is going to have a class of inputs group.

00:16:39.570 --> 00:16:40.460
I don't

00:16:43.870 --> 00:16:45.690
know it's going to work OK.

00:16:45.780 --> 00:16:50.790
It's not going to work with a phone group but it will work with an input group and we need to give the

00:16:52.260 --> 00:16:54.180
additional span an input group.

00:16:54.190 --> 00:16:55.240
I don't class.

00:16:55.310 --> 00:16:55.610
OK.

00:16:55.610 --> 00:16:56.650
And it is working.

00:16:56.760 --> 00:16:58.790
You can see how it works.

00:16:58.860 --> 00:17:01.280
All right.

00:17:02.390 --> 00:17:12.750
OK now we're going to go for one final example where we add a button attached to the inputs so we can

00:17:13.020 --> 00:17:13.530
still

00:17:17.670 --> 00:17:20.770
copy paste these text inputs.

00:17:21.150 --> 00:17:22.930
OK let's have a line break again

00:17:24.720 --> 00:17:28.310
.

00:17:28.650 --> 00:17:29.680
A horizontal line

00:17:31.970 --> 00:17:33.800
.

00:17:35.130 --> 00:17:37.280
So now rather than having some text there.

00:17:37.510 --> 00:17:42.140
So we'd like to have a button.

00:17:42.730 --> 00:17:43.270
So.

00:17:43.410 --> 00:17:51.960
So instead of having this one we're going to create a button but we need to to place the button inside

00:17:52.020 --> 00:17:52.900
a span.

00:17:53.310 --> 00:17:54.180
OK.

00:17:54.180 --> 00:18:03.570
So let's go for a spin and then inside the span we can have a button.

00:18:05.860 --> 00:18:06.560
OK.

00:18:06.870 --> 00:18:13.660
So first this bun is going to have a new class.

00:18:13.890 --> 00:18:17.780
It's going to be input's group.

00:18:19.480 --> 00:18:21.690
OK.

00:18:23.310 --> 00:18:25.280
You can see the button is going to go there.

00:18:25.710 --> 00:18:29.620
And the button we can just place.

00:18:29.660 --> 00:18:34.080
OK let's have some text for the button mate and also

00:18:38.500 --> 00:18:42.470
give it a type button

00:18:45.570 --> 00:18:56.420
and also a close button and button defaults for example.

00:18:56.890 --> 00:18:57.260
OK

00:18:57.530 --> 00:19:04.900
.

00:19:10.970 --> 00:19:14.290
In the next video we're going to cover buttons in detail