WEBVTT

00:00:06.910 --> 00:00:11.380
In this video we're going to get introduced to the bootstrap grid system.

00:00:11.640 --> 00:00:16.470
If you go back through the bootstrap home page and scroll down little bits we can revisit the example

00:00:16.470 --> 00:00:23.620
we have seen earlier where we had a layouts that responds to changes of the width of our viewport.

00:00:23.640 --> 00:00:31.470
So if you go from small device sizes where we have the elements stacked this way and increase the width

00:00:31.530 --> 00:00:38.270
of the viewport we can see how the layout adjusts according to the new with.

00:00:38.460 --> 00:00:43.280
And we will see that at some points the elements unlost sucks anymore.

00:00:43.410 --> 00:00:49.950
They get aligned and as we increasing the with the layouts we'll keep adjusting according to the new

00:00:49.950 --> 00:00:50.330
way.

00:00:50.550 --> 00:01:00.660
OK so to understand the grid system you can imagine that we've got 12 columns and each elements in the

00:01:00.660 --> 00:01:05.230
page is taking a with equal to a number of columns.

00:01:05.310 --> 00:01:10.220
Given that the sum of all the weights is equal to 12 columns.

00:01:10.290 --> 00:01:10.720
OK.

00:01:11.040 --> 00:01:18.720
So we can have a specific design for each device size by choosing the number of columns but each elements

00:01:18.720 --> 00:01:19.900
will occupy.

00:01:20.450 --> 00:01:27.470
OK so let's build our own example and see in detail how it all works.

00:01:27.480 --> 00:01:29.640
So let's go to our grid system.

00:01:29.670 --> 00:01:38.430
Those ASML file I've created a simple div inside the container showing device size and have just created

00:01:38.490 --> 00:01:45.330
a simple javascript code showing the width of the browser and also which device size we're looking at

00:01:45.350 --> 00:01:45.620
.

00:01:45.870 --> 00:01:50.180
OK so if you want to look at this in detail you can do that on your own.

00:01:50.190 --> 00:01:54.050
We're not going to go in detail in the code because it's not the purpose of this video.

00:01:54.600 --> 00:02:01.800
So if we change the width of the window we can see because see here the width of our window and also

00:02:01.800 --> 00:02:06.810
we can see which device size we're looking at so if we start from the smallest device size extra small

00:02:06.810 --> 00:02:14.850
devices phones and we keep increasing the width we're going to move at some points to small devices

00:02:14.850 --> 00:02:15.040
.

00:02:15.090 --> 00:02:24.780
So I 768 pixels and then at nine hundred ninety two we moved to medium devices and then at twelve hundred

00:02:24.990 --> 00:02:27.640
we move to a large devices.

00:02:27.680 --> 00:02:29.530
OK.

00:02:29.770 --> 00:02:32.830
All right OK.

00:02:32.970 --> 00:02:42.300
Now we are going to create a couple of days inside our container and we will see how we are going to

00:02:42.390 --> 00:02:47.230
change the layout of the page depending on the device size.

00:02:47.280 --> 00:02:47.670
OK.

00:02:47.790 --> 00:02:53.840
Is Greece a couple of days and give a background color for each day if you can do this on your own.

00:02:53.880 --> 00:03:00.990
So a couple of days with different background colors and let's give each div a height of 200 pixels

00:03:03.900 --> 00:03:04.890
OK.

00:03:05.190 --> 00:03:07.810
So let's go with this

00:03:09.780 --> 00:03:12.210
.

00:03:14.110 --> 00:03:23.150
Give us a close for books I can read books and it's just style.

00:03:23.160 --> 00:03:23.550
Each one

00:03:43.280 --> 00:03:46.560
writes will be skills

00:03:47.150 --> 00:03:56.150
.

00:04:05.310 --> 00:04:17.370
OK so now we want to design the layouts of the page so that in medium device sizes we can have both

00:04:17.460 --> 00:04:27.750
divs aligned in a way that the first div has with taking 8 columns and the second div takes four columns

00:04:27.750 --> 00:04:29.000
for the way.

00:04:29.730 --> 00:04:35.020
So a way to do that is by using a class.

00:04:35.430 --> 00:04:36.360
OK.

00:04:36.360 --> 00:04:42.980
So the classes are going to be column medium followed by the number of columns.

00:04:43.410 --> 00:04:43.740
OK.

00:04:43.800 --> 00:04:47.470
So column medium.

00:04:47.830 --> 00:04:52.810
So for a by the number of columns so the first only we look in at eight columns.

00:04:53.180 --> 00:04:54.300
OK.

00:04:54.360 --> 00:05:01.700
And the second one you going to have column medium for columns.

00:05:01.700 --> 00:05:02.470
All right.

00:05:03.150 --> 00:05:11.610
So now we cannot see it's now because we're looking extra small devices but if we resize the width of

00:05:11.610 --> 00:05:19.200
our window and we go to medium devices now we can see that the first half is taking eight columns for

00:05:19.200 --> 00:05:22.520
the width and the second one is taking four colors.

00:05:22.530 --> 00:05:23.490
All right.

00:05:23.820 --> 00:05:24.420
All right.

00:05:24.900 --> 00:05:35.130
So if we choose a design for one device size the next device size is going to inherit the same design

00:05:35.150 --> 00:05:35.380
.

00:05:35.610 --> 00:05:40.350
So large devices we can see them we can see that they have the same design as medium devices.

00:05:40.590 --> 00:05:47.790
But if we go back to more devices we can see that's the DBs are stacked on the same thing for extra

00:05:47.790 --> 00:05:49.020
small devices.

00:05:49.020 --> 00:05:57.870
So if you want to change the small devices design as well there is another there's another class we

00:05:57.870 --> 00:05:59.840
can use.

00:06:01.050 --> 00:06:08.160
This one is going to be Colomb small followed by the number of columns you want.

00:06:08.160 --> 00:06:21.020
So let's say for small devices we want each to take six columns for the width so column as small four

00:06:21.060 --> 00:06:22.310
by the number of columns.

00:06:22.380 --> 00:06:31.550
Make sure that the sum is all the time 12 for each device size.

00:06:31.650 --> 00:06:34.070
So we're looking at extra small devices.

00:06:34.080 --> 00:06:40.870
Now if you move to more devices we can see that's the device.

00:06:40.890 --> 00:06:49.050
Our second half of the screen move to medium devices 8 and 4 and the same thing for lunch devices.

00:06:49.050 --> 00:06:49.550
OK.

00:06:49.860 --> 00:06:54.000
So let's do the same thing for extra small devices.

00:06:54.630 --> 00:07:04.140
So the class is column X s followed by the number of columns so let's go for three columns with the

00:07:04.140 --> 00:07:04.890
first one.

00:07:04.930 --> 00:07:05.850
Let's go for

00:07:09.320 --> 00:07:20.100
mine columns for the second or so you can use you know that's for extra small devices three and nine

00:07:20.110 --> 00:07:20.280
.

00:07:20.490 --> 00:07:29.280
And then more small devices six and six then eight and four for medical devices and the same thing for

00:07:29.280 --> 00:07:31.950
all those devices we can change a large device as well.

00:07:31.950 --> 00:07:32.840
So it is just odd.

00:07:32.880 --> 00:07:33.860
Another close.

00:07:33.990 --> 00:07:34.950
So you can guess this one.

00:07:34.960 --> 00:07:39.910
It's called column large followed by the number of columns.

00:07:39.920 --> 00:07:43.010
This go for four.

00:07:43.270 --> 00:07:50.850
The first one and eight for the second one or.

00:07:51.140 --> 00:07:55.190
Or the opposite of eight and four.

00:07:56.540 --> 00:08:01.020
OK.

00:08:01.100 --> 00:08:07.980
So you can see if we started from this more device we can see how the layout changes when you move to

00:08:08.250 --> 00:08:12.150
small devices and then to medium devices and then to

00:08:18.300 --> 00:08:19.170
large devices

00:08:20.740 --> 00:08:23.700
.

00:08:24.420 --> 00:08:27.540
We pick up the same design for large and medium.

00:08:27.540 --> 00:08:27.930
OK.

00:08:27.960 --> 00:08:29.230
So let's just do that.

00:08:29.220 --> 00:08:33.450
So four and eight.

00:08:36.170 --> 00:08:36.510
OK.

00:08:36.570 --> 00:08:38.660
So you can see how it changes.

00:08:38.700 --> 00:08:39.560
All right.

00:08:39.620 --> 00:08:40.010
You can.

00:08:40.050 --> 00:08:45.180
You can copy the classes inside the text.

00:08:45.360 --> 00:08:48.480
So that is clear.

00:08:50.760 --> 00:08:51.270
OK.

00:08:51.370 --> 00:08:53.860
Now you can see.

00:08:55.950 --> 00:09:03.120
OK so for extra small three and nine and then

00:09:06.140 --> 00:09:17.400
small devices six and six and then medium devices eight and four and then four large devices you can

00:09:17.610 --> 00:09:18.540
four and eight