WEBVTT

00:00:07.260 --> 00:00:12.930
In this video we're going to learn how to create responsive images using bootstrap.

00:00:13.090 --> 00:00:16.630
Why did they for the images to our products folder.

00:00:16.640 --> 00:00:18.650
There is a picture in there.

00:00:19.050 --> 00:00:29.250
So all we can do we can create an image OK and then we will use bootstrap classes to make the image

00:00:29.250 --> 00:00:30.240
responsive.

00:00:30.780 --> 00:00:32.950
So let's add a source attribute to the image.

00:00:32.960 --> 00:00:37.700
So we go into the images folder and we are selecting that picture.

00:00:37.750 --> 00:00:43.410
OK let's have an alt attributes responsive image.

00:00:44.810 --> 00:00:45.290
OK.

00:00:45.630 --> 00:00:52.160
So then we see that the image is shown with the original dimensions of the of the image.

00:00:52.170 --> 00:01:01.680
So if you want to make the image responsive friendly So that's the image response to the changes of

00:01:01.680 --> 00:01:03.120
the width of our viewport.

00:01:03.120 --> 00:01:12.240
We can use a class it's called Image responsive.

00:01:13.180 --> 00:01:21.540
And now you can see that image the image will respond mostly to the size of our device.

00:01:21.860 --> 00:01:30.600
OK so what's this class is doing is adding a max width of help percents to the image and also a heights

00:01:30.720 --> 00:01:34.480
of OKto so we call it to height.

00:01:34.930 --> 00:01:36.420
OK.

00:01:36.690 --> 00:01:40.950
Also we can use some bootstrap classes to style the image.

00:01:40.950 --> 00:01:48.700
So for example we can make the corners around it using the image rodded class.

00:01:48.900 --> 00:01:50.130
OK.

00:01:50.880 --> 00:01:55.180
We can also use the image thumbnail.

00:01:55.830 --> 00:01:56.830
OK.

00:01:57.450 --> 00:02:07.590
And also you can use image circle for example you can see how this is a site where it