1
00:00:00,420 --> 00:00:06,720
Bootstrap can be used to style images we can create rounded corners circular shapes and even thumbnails

2
00:00:08,320 --> 00:00:09,790
to add rounded corners.

3
00:00:09,790 --> 00:00:16,160
We simply need to add the image rounded class to the image element on the left hand side here.

4
00:00:16,400 --> 00:00:22,650
You can see that we have an image element inside of our container the image element contains a source

5
00:00:23,010 --> 00:00:28,010
width and height we'll go ahead and add a class to this image.

6
00:00:30,580 --> 00:00:33,870
Image dash rounded.

7
00:00:34,070 --> 00:00:38,120
Now I've saved the file in and before I refresh the browser.

8
00:00:38,120 --> 00:00:41,240
Just look at the edges of the image you'll notice right now.

9
00:00:41,240 --> 00:00:43,100
They're perfectly straight.

10
00:00:43,130 --> 00:00:47,090
Now if I refresh you'll notice that the corners have now rounded

11
00:00:51,290 --> 00:00:55,430
we can also shape the image into a circle using the image circle class

12
00:00:59,020 --> 00:01:04,090
just save the file and refresh and you can see it takes on a circular shape.

13
00:01:07,700 --> 00:01:11,780
The image thumbnail class.

14
00:01:11,780 --> 00:01:21,160
What this does is it adds a light thin border around the image and the border it's corners are also

15
00:01:21,160 --> 00:01:27,530
slightly rounded so it just gives it that thumbnail appearance.

16
00:01:27,660 --> 00:01:36,150
You can make any image responsive by adding the image responsive class but what I'll do just to show

17
00:01:36,150 --> 00:01:42,960
you how this works is I'll remove the class altogether for now and I'll refresh the page.

18
00:01:42,960 --> 00:01:50,670
Watch what happens as we scale this browser window smaller and smaller you'll see that the image is

19
00:01:50,670 --> 00:01:57,880
not responsive meaning it's staying the same size as we're reducing the size of the viewport.

20
00:02:00,520 --> 00:02:05,630
We can make the image responsive by by just adding the image responsive.

21
00:02:05,630 --> 00:02:06,190
Class

22
00:02:09,650 --> 00:02:14,780
and now when we resize the browser window you can see that it scales with the viewport.