WEBVTT

00:00:08.280 --> 00:00:15.540
In this video we're going to learn how to use bootstrap to create and style forms.

00:00:15.950 --> 00:00:23.040
We're going to create a simple log in form using a basic Hasyim L and then we going to use bootstrap

00:00:23.040 --> 00:00:25.260
ready classes to Stylophone.

00:00:25.590 --> 00:00:35.640
OK so let's start so let's create the form using the form tag and our first input is going to be the

00:00:35.640 --> 00:00:36.890
email inputs.

00:00:37.350 --> 00:00:48.350
OK so that type is email and the ID is going to be Email List of a placeholder email.

00:00:48.880 --> 00:00:57.450
OK let's have a label for these inputs and we are going to have a for us to butes.

00:00:57.750 --> 00:01:01.520
She's going to be for e-mail alerts on some texts e-mail.

00:01:02.250 --> 00:01:08.370
OK let's do the same thing for the password so in inputs.

00:01:08.470 --> 00:01:16.810
Type of the inputs is going to be password and also give you an ID password.

00:01:17.040 --> 00:01:20.970
And finally a placeholder as well password.

00:01:21.020 --> 00:01:35.790
It does have a label will label for password and it has some text there password.

00:01:37.500 --> 00:01:40.850
OK.

00:01:41.470 --> 00:01:45.660
And finally let's have a logging button.

00:01:45.720 --> 00:01:50.580
So it's going to be a button type is submit.

00:01:51.330 --> 00:01:55.050
And let's play some text logging.

00:01:55.680 --> 00:01:59.400
So a simple a simple form.

00:01:59.400 --> 00:02:03.260
Now we're going to start looking at bootstrap classes.

00:02:03.270 --> 00:02:09.410
We can use to style the form and optimize the spacing and so on.

00:02:09.420 --> 00:02:09.950
OK.

00:02:10.170 --> 00:02:19.200
So the first thing we're going to do each of the inputs we're going to give them a we're going to add

00:02:19.440 --> 00:02:22.520
to them a class called form control.

00:02:22.870 --> 00:02:23.550
OK.

00:02:23.760 --> 00:02:29.810
So let's see what's this class what effects what effect this class is going to create.

00:02:29.820 --> 00:02:33.890
So close form control.

00:02:33.960 --> 00:02:36.830
OK so you can see that some basic styling.

00:02:36.930 --> 00:02:43.390
First thing you can notice that the width of the inputs has changed.

00:02:43.410 --> 00:02:45.380
So it's 100 percent now.

00:02:45.560 --> 00:02:49.780
And also you can see some styling for the the border.

00:02:50.890 --> 00:02:51.190
OK

00:02:53.980 --> 00:02:54.950
fine.

00:02:55.510 --> 00:03:01.920
Less are the same class our password.

00:03:04.200 --> 00:03:07.220
OK.

00:03:07.490 --> 00:03:08.850
Let's say the button.

00:03:08.850 --> 00:03:09.620
Very quickly.

00:03:09.720 --> 00:03:10.500
We'll see.

00:03:10.550 --> 00:03:15.480
I wasn't smiling in detail later on but let's just say this this one for no.

00:03:15.550 --> 00:03:18.450
Adding a class Button.

00:03:18.870 --> 00:03:19.520
OK.

00:03:19.560 --> 00:03:26.540
We're going to have another class Button default will cover buttons later on in detail.

00:03:27.400 --> 00:03:28.970
OK.

00:03:28.980 --> 00:03:33.640
Now we are going to do something else just to optimize the spacing so we can see there.

00:03:33.960 --> 00:03:40.370
We don't have any margin between the inputs and the button.

00:03:40.400 --> 00:03:42.310
Same thing there.

00:03:43.050 --> 00:03:44.720
So the e-mail inputs.

00:03:44.970 --> 00:03:48.340
So there is a class we can use as well.

00:03:48.360 --> 00:03:59.290
It's called a Form group and usually this class is added to an element that will wrap and inputs with

00:03:59.290 --> 00:04:00.590
the label.

00:04:00.600 --> 00:04:09.440
So are you going to do on up email or the email inputs and the e-mail label inside a div that we're

00:04:09.450 --> 00:04:09.860
going to give.

00:04:09.880 --> 00:04:16.390
Does the A-Class form group OK I'm going to do the same thing with the password inputs and it's labeled

00:04:16.540 --> 00:04:16.790
.

00:04:16.920 --> 00:04:19.940
And we will see how the spacing is going to be optimized.

00:04:20.130 --> 00:04:20.790
OK.

00:04:20.940 --> 00:04:21.790
So let's do that.

00:04:21.870 --> 00:04:27.790
So let's select the label of the email and the inputs are going to copy that.

00:04:27.840 --> 00:04:39.620
And I'm going to create a diff give it's a class form group and then I'm going to place that Emily was

00:04:39.630 --> 00:04:43.160
on his label so you can already see some what's missing.

00:04:43.480 --> 00:04:48.350
OK let's do the same thing with the password.

00:04:48.450 --> 00:04:50.860
Creative.

00:04:50.860 --> 00:04:53.290
Are going to give you a class form of

00:04:56.930 --> 00:04:59.820
ok ok fine.

00:05:00.310 --> 00:05:00.690
OK.

00:05:00.700 --> 00:05:02.080
No.

00:05:02.830 --> 00:05:12.080
If you want to change the display of our form to inline there is a simple clause for that we just need

00:05:12.070 --> 00:05:17.500
to give the form a class form in line.

00:05:17.550 --> 00:05:19.090
We don't see anything at the moment.

00:05:19.090 --> 00:05:28.720
So anything under seven hundred sixty eight we can't see the impact of the formula in class but once

00:05:28.730 --> 00:05:37.840
we make the post with bigga so beyond 768 pixels we can see the inline display.

00:05:38.440 --> 00:05:42.990
Ok ok fine.

00:05:43.490 --> 00:05:50.040
Now let's create another form and try a few more classes.

00:05:50.120 --> 00:05:54.230
So who's going to copy copy the same form.

00:05:55.120 --> 00:05:58.940
OK let's have a line break.

00:05:59.060 --> 00:06:01.380
A horizontal line.

00:06:01.960 --> 00:06:05.960
Well no it's copy the form here.

00:06:06.710 --> 00:06:13.460
It's because the form line class and this.

00:06:14.980 --> 00:06:16.700
OK fine.

00:06:16.900 --> 00:06:27.950
So the first thing we're going to have a look at is going to be the horizontal form business class which

00:06:27.940 --> 00:06:30.180
will make our form horizontal.

00:06:30.500 --> 00:06:40.790
So we're going to do we have a horizontal form where the labels and their corresponding inputs are aligned

00:06:41.690 --> 00:06:49.110
and we'll use the grid system to give each of these a number of column to occupy for them.

00:06:49.380 --> 00:06:58.850
OK so let's let's try that so first first of all we need the class for horizontal.

00:07:01.000 --> 00:07:01.140
I

00:07:05.250 --> 00:07:08.300
don't see anything at the woman's game because we need to

00:07:11.620 --> 00:07:13.580
use the agreed system first.

00:07:13.630 --> 00:07:14.390
So we are going to do

00:07:14.380 --> 00:07:23.470
.

00:07:23.480 --> 00:07:28.720
We're going to use the grid system classes to define the number of columns.

00:07:28.750 --> 00:07:34.260
That's the label and the inputs are going to take so.

00:07:35.110 --> 00:07:45.430
So for labels we're going to use a class so let's say that we want to use the grid system to define

00:07:45.440 --> 00:07:46.660
the width of these elements.

00:07:46.690 --> 00:07:54.030
For small devices and beyond so it is going to be small devices medium and large devices.

00:07:54.790 --> 00:08:00.880
So we won't see any effects for extra small devices so under seven hundred sixty eight pixels we're

00:08:00.900 --> 00:08:01.990
not going to see anything.

00:08:02.360 --> 00:08:08.360
OK so the gloves we're going to use for the label is going to be calm.

00:08:09.740 --> 00:08:11.840
Let's go for two columns.

00:08:12.400 --> 00:08:17.120
So for labels we need to add another class control label.

00:08:17.690 --> 00:08:19.550
We have to use this class.

00:08:19.690 --> 00:08:20.340
OK.

00:08:20.760 --> 00:08:28.990
OK so let's move to the inputs so inputs we can't we cannot use the column as some gloves straight away

00:08:29.000 --> 00:08:35.770
but we need to replace the inputs inside a div OK first.

00:08:37.620 --> 00:08:46.180
And we get to give that Stiv the glass column and some 10 columns in one case.

00:08:46.510 --> 00:08:47.400
OK.

00:08:48.230 --> 00:09:01.750
So now if we make 0 with the viewport with bigga so you can see the layouts looks like.

00:09:02.330 --> 00:09:10.260
So the email label is taking two columns out of the 12 columns with a grid system and the inputs is

00:09:10.250 --> 00:09:12.510
the content columns.

00:09:12.520 --> 00:09:15.260
All right.

00:09:16.580 --> 00:09:18.850
OK.

00:09:19.250 --> 00:09:22.010
Now we get to move the password and do exactly the same thing.

00:09:22.000 --> 00:09:25.070
So let's just copy the label glowers

00:09:27.960 --> 00:09:35.900
the to the password label.

00:09:38.810 --> 00:09:45.740
And also we're going to place the password inputting site a day.

00:09:48.520 --> 00:09:51.490
And we're going to give this div a class

00:09:55.250 --> 00:09:59.530
column and some 10 day.

00:10:00.110 --> 00:10:02.480
OK moving on to the button.

00:10:02.600 --> 00:10:13.930
So we'll do the same thing but this time we're just going to place the person inside a div OK and we'll

00:10:13.930 --> 00:10:17.330
give this div a class.

00:10:17.530 --> 00:10:20.380
Ok so first we want the button to

00:10:23.710 --> 00:10:30.360
raise We want to jump to columns and we want the button to start here.

00:10:30.400 --> 00:10:35.460
So in this case we can to use a different class.

00:10:36.080 --> 00:10:37.280
So this class is going to be

00:10:44.860 --> 00:10:53.230
column some offsets followed by the number of columns.

00:10:53.570 --> 00:10:54.590
OK.

00:10:55.180 --> 00:11:01.360
And then we're going to have column 10.

00:11:01.780 --> 00:11:10.600
Now you will see that we jump two columns and then we have our button.

00:11:11.150 --> 00:11:12.060
OK.

00:11:12.490 --> 00:11:13.360
That's how it works

00:11:13.370 --> 00:11:19.420
.

00:11:19.700 --> 00:11:24.720
You can see how the horizontal form looks like.

00:11:25.390 --> 00:11:33.530
OK so just remember that's for inputs we need to place them inside a div before we use our grid system

00:11:33.520 --> 00:11:33.690
.

00:11:33.740 --> 00:11:46.400
Class the the label we can use straight away the Greeces some classes we need to add the control label

00:11:46.580 --> 00:11:47.680
class to.

00:11:47.750 --> 00:11:57.940
That's OK for Bateson's even a jump a number of columns we need to use the column of offsets followed

00:11:57.940 --> 00:12:00.320
by the number of columns.

00:12:00.410 --> 00:12:00.710
Okay.

00:12:00.740 --> 00:12:08.320
And then we can use the column as a 10 for the number of columns taken by the inputs.

00:12:08.330 --> 00:12:09.630
OK.

00:12:10.740 --> 00:12:15.650
Okay perfect.