No self-respect webpage designers, would today design webpages without including some form of images or media on their websites. Computer science professors are an exception. At this stage, you are probably expecting me to say this, but that's not what I'm going to say. I'm going to say that, "A picture is worth $12 on iStockPhoto.com. Bootstrap provides extensive support for including images and various kinds of media in your websites and your web pages. The image HTML tag is obviously going to be used for including images in your webpages. Bootstrap also provides a bunch of classes that you can apply to the image tag in order to further enhance the way images are included in your webpage. So you could use a image class called img-fluid which will make your images responsive, meaning that the size of the image will automatically adjust to different screen sizes. You can also use an img-thumbnail which will put a white border around your image. You can also deal with the shapes and sizes of images like you see in this picture here so you can have images for which you create rounded corners, either all the four corners, or any chosen pair of corners. So you can apply the class around it to create a image with rounded corners or you can see a rounded hyphen top bottom left or right to put the rounded corners in any one of these four edges of your image. You can also apply rounded circle to create circular images. So, when you visit websites, you would see images being used in many of these ways already. You'll remember we saw the Card class in the previous lesson and the exercise. Here, I illustrate the use of the Card class with an image included. So in this case, we include an image with the class card image top and if you include large enough size the image that image will be included at the top and then enclosed inside a card like this. If the image is too small, then it may be positioned to one corner in your card. So use a large enough image to be able to define a clean card like this. So here you'll see the image being described with, the classes applied to that including card image top and img-fluid to make the image responsive automatically. So, this is how you can use the images with the Card class to define cards that you use on your webpages. Another way of including images and related content in your webpages is a media object. A media object allows you to specify an image that you can position either to the left or to the right of the description. Also, you can include a media body which contains the description that goes together with the image. So as you see in this example here, the media body itself encloses any HTML formatted content here. So here I am using an h2 and h4 together with a p class inside the media body to define the actual content. We will use the media object in the exercise that follows. You can also do a responsive embed of content. So for example, if you have a video that you want to enclose in your webpage, then you can use an iframe class to frame the video, and then enclose it inside the div with the classes embedded responsive giving sizes so you can 16by9, 4by3 or video, content to be displayed. So responsive embed, you can use the embed or iframe or video or object HTML tags and then enclose it inside a div. Applying the embed-responsive and also together with the embed-responsive, specifying the dimensions which you want to use for 4by3 or 16by9 dimensions. So this is how you can also enclose video content in your webpages. Now, that we have seen the support for images and media, it is time to go onto an exercise where we will look at how we can include images in the webpage or the website that we have been working on. We'll make some changes to the index.html page by including some images and content using the media object.
