WEBVTT

00:00:06.940 --> 00:00:13.470
In this video we're going to learn how to use bootstrap to create a thumbnails that will help us to

00:00:14.520 --> 00:00:21.800
display grids of any ASML content we could be talking about them nails of pictures.

00:00:21.810 --> 00:00:24.390
So we're going to be creating Gritz of pictures.

00:00:24.450 --> 00:00:31.200
We can also create crates of any similar concerns that could include anything like pictures headings

00:00:31.500 --> 00:00:33.680
paragraphs buttons and so on.

00:00:34.050 --> 00:00:43.140
So this starts we're going to create thumbnails of pictures so as we are going to use the grid system

00:00:43.710 --> 00:00:51.920
first of all we need to place everything inside a row or a div of class row.

00:00:52.750 --> 00:00:53.360
OK.

00:00:53.510 --> 00:01:02.310
And then we're going to place each of these elements inside another div and each of those divs is going

00:01:02.310 --> 00:01:07.450
to have a class depending on the number of columns.

00:01:07.960 --> 00:01:13.210
Thus we want to allocate for each of these elements in the different device size.

00:01:13.240 --> 00:01:16.120
So in our example.

00:01:16.260 --> 00:01:20.190
So we want the components to

00:01:22.830 --> 00:01:27.210
occupy six columns for extra small devices.

00:01:27.750 --> 00:01:35.970
OK up to small devices and then from medium devices and up we want each component to take one third

00:01:36.330 --> 00:01:39.630
of the viewport or four columns.

00:01:39.630 --> 00:01:40.480
All right.

00:01:41.100 --> 00:01:41.880
So let's go for that.

00:01:41.880 --> 00:01:48.280
So the class we're going to use for each div is going to be.

00:01:48.340 --> 00:01:55.550
So first of all column X as 6.

00:01:56.370 --> 00:01:59.470
So this is for extra small devices.

00:01:59.660 --> 00:02:00.300
OK.

00:02:00.390 --> 00:02:05.050
And he's going to extend to us more devices as well.

00:02:05.700 --> 00:02:16.410
And then we're going to use column medium for medium devices which will extend to large devices as well

00:02:16.430 --> 00:02:16.750
.

00:02:17.020 --> 00:02:18.690
OK.

00:02:20.610 --> 00:02:27.720
Now we can place the image inside a link of plus thumbnail so we can have a link

00:02:32.970 --> 00:02:37.250
and we'll placed the image inside the link

00:02:41.120 --> 00:02:51.560
on the page read the link and also have a glass thumbnail.

00:02:52.110 --> 00:02:56.790
Now the image that let's use

00:02:59.910 --> 00:03:00.420
this one

00:03:08.580 --> 00:03:13.200
is beads.

00:03:15.210 --> 00:03:18.830
OK.

00:03:21.100 --> 00:03:22.600
OK.

00:03:22.740 --> 00:03:27.840
Now we going to copy the same Dave

00:03:33.450 --> 00:03:39.320
three times and then we can see thumbnails of pictures.

00:03:39.370 --> 00:03:40.830
All right.

00:03:41.250 --> 00:03:41.880
OK.

00:03:41.880 --> 00:03:47.160
Now we're going to do the same thing to create thumbnails of

00:03:52.950 --> 00:03:56.760
Bips with this contents we're going to have a picture.

00:03:56.880 --> 00:04:01.440
We can have a heading paragraph and then a couple of buttons

00:04:01.440 --> 00:04:12.850
.

00:04:12.850 --> 00:04:17.780
So first we need to create a row.

00:04:19.750 --> 00:04:21.540
OK.

00:04:23.120 --> 00:04:35.300
Then inside the row we're going to have a div now we need to use the grid.

00:04:35.300 --> 00:04:37.580
There is some classes.

00:04:37.650 --> 00:04:45.260
So let's go for the same classes we have used earlier for the thumbnails of pictures.

00:04:47.690 --> 00:04:57.490
OK so we are looking at the four small for extra small devices and small devices.

00:05:03.670 --> 00:05:05.610
All these changes so let's go for

00:05:08.850 --> 00:05:10.310
small devices.

00:05:10.740 --> 00:05:11.500
OK.

00:05:11.620 --> 00:05:17.200
Dave's gonna occupy half of the with OK.

00:05:17.310 --> 00:05:26.050
And then for medium and up they will occupy four columns or one third of the width of the viewport.

00:05:26.100 --> 00:05:33.180
So anything under 766 else is going to be extra small.

00:05:33.420 --> 00:05:35.260
They're going to be stacked.

00:05:35.970 --> 00:05:38.480
OK.

00:05:38.850 --> 00:05:45.120
All right so let's blaze content inside the Stiv.

00:05:45.330 --> 00:05:53.820
Let's create another Dave and this is going to have a glass of thumbnail.

00:05:54.990 --> 00:05:56.560
OK.

00:05:56.700 --> 00:06:01.380
So first of all it's a good image

00:06:06.860 --> 00:06:13.270
and then we're going to have another div where we place the header paragraph on buttons

00:06:13.280 --> 00:06:19.400
.

00:06:25.050 --> 00:06:31.430
OK and this place our cousins inside a paragraph as well.

00:06:31.940 --> 00:06:33.550
OK.

00:06:34.750 --> 00:06:45.600
So first of all the image is going to be this gives us a source image is OK.

00:06:46.570 --> 00:06:47.590
And it's

00:06:55.370 --> 00:06:57.650
great.

00:06:59.390 --> 00:07:04.980
And then our Dave we're going to give it to a class

00:07:07.860 --> 00:07:10.370
of corruption.

00:07:10.880 --> 00:07:11.120
OK

00:07:12.620 --> 00:07:15.560
.

00:07:19.050 --> 00:07:21.930
OK let's take it to the head.

00:07:21.990 --> 00:07:24.660
So product title

00:07:28.830 --> 00:07:31.300
products description.

00:07:32.570 --> 00:07:32.900
OK.

00:07:32.910 --> 00:07:40.230
And then in the last paragraph let's create a couple of links.

00:07:40.820 --> 00:07:43.380
OK.

00:07:43.450 --> 00:07:44.200
Sponsons

00:07:50.100 --> 00:07:57.960
have any Tref you have a class Button.

00:07:58.050 --> 00:08:04.580
The first person is going to be Pozen primary.

00:08:07.880 --> 00:08:08.150
OK

00:08:12.090 --> 00:08:26.400
this is a rule but in case it's play some text the to watch list.

00:08:27.610 --> 00:08:32.130
OK let's create another one.

00:08:32.190 --> 00:08:36.910
This one is going to be success.

00:08:36.980 --> 00:08:42.100
Let's have some text to buskins.

00:08:44.510 --> 00:08:45.590
OK.

00:08:46.250 --> 00:08:46.480
OK.

00:08:46.500 --> 00:08:50.020
Now let's copy paste the same.

00:08:50.400 --> 00:09:06.120
Dave Loyce OK so you can see now that for this width of the viewport we are an extra small size.

00:09:06.640 --> 00:09:11.560
OK so this is for extra small devices so we can see that's the thumbnails.

00:09:11.900 --> 00:09:13.040
They are stacked.

00:09:13.250 --> 00:09:24.600
And then once we go for small devices just beyond 760 pixels we can see that they take up six columns

00:09:25.070 --> 00:09:29.980
K and then moving to medium devices.

00:09:29.980 --> 00:09:34.030
They will take one third of the weight of the viewport.

00:09:35.410 --> 00:09:36.720
And the same for large devices