1 00:00:03,250 --> 00:00:07,080 No self-respect webpage designers, 2 00:00:07,080 --> 00:00:10,990 would today design webpages without including 3 00:00:10,990 --> 00:00:15,665 some form of images or media on their websites. 4 00:00:15,665 --> 00:00:19,055 Computer science professors are an exception. 5 00:00:19,055 --> 00:00:23,390 At this stage, you are probably expecting me to say this, 6 00:00:23,390 --> 00:00:26,270 but that's not what I'm going to say. 7 00:00:26,270 --> 00:00:29,255 I'm going to say that, 8 00:00:29,255 --> 00:00:33,425 "A picture is worth $12 on iStockPhoto.com. 9 00:00:33,425 --> 00:00:38,060 Bootstrap provides extensive support for including 10 00:00:38,060 --> 00:00:42,800 images and various kinds of media in your websites and your web pages. 11 00:00:42,800 --> 00:00:49,040 The image HTML tag is obviously going to be used for including images in your webpages. 12 00:00:49,040 --> 00:00:55,170 Bootstrap also provides a bunch of classes that you can apply to 13 00:00:55,170 --> 00:01:02,215 the image tag in order to further enhance the way images are included in your webpage. 14 00:01:02,215 --> 00:01:08,535 So you could use a image class called img-fluid which will make your images responsive, 15 00:01:08,535 --> 00:01:15,195 meaning that the size of the image will automatically adjust to different screen sizes. 16 00:01:15,195 --> 00:01:22,585 You can also use an img-thumbnail which will put a white border around your image. 17 00:01:22,585 --> 00:01:29,480 You can also deal with the shapes and sizes of images like you 18 00:01:29,480 --> 00:01:36,635 see in this picture here so you can have images for which you create rounded corners, 19 00:01:36,635 --> 00:01:38,995 either all the four corners, 20 00:01:38,995 --> 00:01:42,020 or any chosen pair of corners. 21 00:01:42,020 --> 00:01:45,595 So you can apply the class around it to 22 00:01:45,595 --> 00:01:49,450 create a image with rounded corners or you can see 23 00:01:49,450 --> 00:01:53,130 a rounded hyphen top bottom left or right to put 24 00:01:53,130 --> 00:01:57,905 the rounded corners in any one of these four edges of your image. 25 00:01:57,905 --> 00:02:02,780 You can also apply rounded circle to create circular images. 26 00:02:02,780 --> 00:02:05,170 So, when you visit websites, 27 00:02:05,170 --> 00:02:10,310 you would see images being used in many of these ways already. 28 00:02:10,310 --> 00:02:16,000 You'll remember we saw the Card class in the previous lesson and the exercise. 29 00:02:16,000 --> 00:02:21,085 Here, I illustrate the use of the Card class with an image included. 30 00:02:21,085 --> 00:02:27,320 So in this case, we include an image with the class card image top and if you 31 00:02:27,320 --> 00:02:30,760 include large enough size the image that image will be included 32 00:02:30,760 --> 00:02:35,030 at the top and then enclosed inside a card like this. 33 00:02:35,030 --> 00:02:36,860 If the image is too small, 34 00:02:36,860 --> 00:02:41,245 then it may be positioned to one corner in your card. 35 00:02:41,245 --> 00:02:47,315 So use a large enough image to be able to define a clean card like this. 36 00:02:47,315 --> 00:02:52,030 So here you'll see the image being described with, 37 00:02:52,030 --> 00:02:56,035 the classes applied to that including card image top 38 00:02:56,035 --> 00:03:00,510 and img-fluid to make the image responsive automatically. 39 00:03:00,510 --> 00:03:04,470 So, this is how you can use the images with the Card class 40 00:03:04,470 --> 00:03:08,525 to define cards that you use on your webpages. 41 00:03:08,525 --> 00:03:16,605 Another way of including images and related content in your webpages is a media object. 42 00:03:16,605 --> 00:03:20,740 A media object allows you to specify an image that you can position 43 00:03:20,740 --> 00:03:26,225 either to the left or to the right of the description. 44 00:03:26,225 --> 00:03:29,690 Also, you can include a media body which 45 00:03:29,690 --> 00:03:32,880 contains the description that goes together with the image. 46 00:03:32,880 --> 00:03:35,110 So as you see in this example here, 47 00:03:35,110 --> 00:03:41,270 the media body itself encloses any HTML formatted content here. 48 00:03:41,270 --> 00:03:44,820 So here I am using an h2 and h4 together with 49 00:03:44,820 --> 00:03:49,755 a p class inside the media body to define the actual content. 50 00:03:49,755 --> 00:03:54,240 We will use the media object in the exercise that follows. 51 00:03:54,240 --> 00:03:57,670 You can also do a responsive embed of content. 52 00:03:57,670 --> 00:04:03,360 So for example, if you have a video that you want to enclose in your webpage, 53 00:04:03,360 --> 00:04:07,690 then you can use an iframe class to frame the video, 54 00:04:07,690 --> 00:04:10,760 and then enclose it inside the div with the classes 55 00:04:10,760 --> 00:04:16,410 embedded responsive giving sizes so you can 16by9, 56 00:04:16,410 --> 00:04:21,020 4by3 or video, content to be displayed. 57 00:04:21,020 --> 00:04:27,630 So responsive embed, you can use the embed or iframe 58 00:04:27,630 --> 00:04:34,450 or video or object HTML tags and then enclose it inside a div. 59 00:04:34,450 --> 00:04:41,345 Applying the embed-responsive and also together with the embed-responsive, 60 00:04:41,345 --> 00:04:47,295 specifying the dimensions which you want to use for 4by3 or 16by9 dimensions. 61 00:04:47,295 --> 00:04:53,685 So this is how you can also enclose video content in your webpages. 62 00:04:53,685 --> 00:04:57,570 Now, that we have seen the support for images and media, 63 00:04:57,570 --> 00:05:02,230 it is time to go onto an exercise where we will look at how we can include 64 00:05:02,230 --> 00:05:07,310 images in the webpage or the website that we have been working on. 65 00:05:07,310 --> 00:05:11,345 We'll make some changes to the index.html page by 66 00:05:11,345 --> 00:05:17,200 including some images and content using the media object.