How to make images responsive stretchy in Bootstrap 4

Hello there,we are going to work with responsive images. We've done it before earlier on. So we're going to use those sweet new skills to work it with Bootstrap. We're going to add this image here, and we're going to get it, so that it's stretchy, you see, changes sizes, and at different Media Queries, watch, kind of stacks down underneath. Going to work through all of the different options, with Bootstrap4 in VS Code, right now. So we want-- we're looking at the mock-up now. So we've got our text, I want to actually put this image in over on this side. There's a couple of ways of doing it, and there'll be, we'll cover them in this video. It really depends on the implementation. 

What I really want to do is, this image to break down onto its own line, after it goes down to mobile. You can see, I want it kind of underneath. Same sort of thing with the Founder message. Starts up there, moves down, but these little slider guys, I'm just going to turn off. So there's lots of different implementations, depending on what you want to do. So let's add the image to VS Code, I want it to be inside my Jumbotron, which finishes there, which is not quite lined up, there we go. So I want it just afterwards, and I'm going to type it in here, I'm going to say, let's line it up with everything else in there. Image, image source, this one's going to 'images/', and this one is called 'hero1.png', because it needs a transparent background. 

I'm going to make sure I put my Alt text in there, 'Dan's Meat Yogurts'. You can spell that a couple of ways. I'm destined to fail on that word, but there's my Alt text. So got an image, let's see what it looks like, by naturally. By naturally! That's a habit, naturally. It's massive, by default, and Bootstrap images try and stretch all the way out, you're like, "It's not what I want, I want a small one over here." So there's a couple of things we can do. Let's look at the Bootstrap documentation, and let's look under 'Content'. I know it's under Content, and Images. You're going to have to click around for a long time, or do a search. 

So in Images, all we need to do is we need to make, yeah, kind of tells you what you need to do. So in our case if we want to make a responsive image, we need to add this tag called 'image', or 'img-fluid'. So that it kind of moves around. There's other ways, we can turn into thumbnails by calling it-- Let's just have a look at this just because it's interesting. So we add the Class 'img-thumbnail' to this thing. So we've got you, you, you. Before the closing of the Image tag we have put in Class, and it's 'thumbnail', so look at it now. There you go, he's in a big white box, with white background, with rounded corners. Still too big, but just so you know, there are some, not strange Classes, but, just other use cases, we don't want for this. 

So this might be interesting. I want it to be-- I want the Class of maybe 'float:right'. So I can push it over to that right-hand side. Let's see how that works, so let's do that one. Let's see what happens. Still not working, because it's too big. So what a lot of people do with Bootstrap is they'll just give it a width in here. So they say, it's a width of let's say 500 pixels. So it fits up at the side, and I'll give it a height of 'Auto'. So that's-- yeah, the width you define, and it will just be whatever equivalent ratio is for the height. And that's a way of kind of doing it, you're like, "Okay, we're getting there." 

Now I know, in this case I want it to be up, so we're going to have to add like negative margins, and trying to pull it up this way, maybe some absolute positioning. So I'm going to show you a different way, because you might be exactly where you need to be. You've got an image, it responds to different sizes. Let's have a look, let's get it down. Doesn't get down small enough to fit. And I haven't actually added the image responsive. So let's go in there and do that. 

So I've floated it to the right, what I also want is IMG Fluid. So it actually changes size. You can see, they're kind of getting bigger and smaller. Let's actually turn on the 'Inspect', so go to our 'Device Preview'. And now we're going to slide it in and out, and you can see the image. Move that down a bit. It gets bigger and smaller because I've added that image responsive. It's kind of working for us, right? Gets to here and I just want to pop it up that way, and you could chase the negative margin to pull it up. Maybe absolutely position it so it kind of forgets about this, and kind of moves up to the top, but I know that it's going to cause me problems, when I want to, on mobile, remember, break it down into its own line to kind of separate it here. 

So what I want to do is actually just put it into two, like interval row, like we've done lots of things, right? Put it into a row, then have two columns that I can break on these two parts, and we can just like, this one seems a little bit wider than this one, so this maybe can be, I don't know, 7, and this one can be 5 columns, and then I can just, on mobile devices make it 12 and 12, so let's give that a go. So let's have a look. Often you only get to this point, where you're like, "Actually, it'd be better in two columns." After you've had a fight with Float Right and Negative Margins, and you're like, "I give up," and you're like, "Actually…

 So let's get rid of height, width of that stuff. We're going to keep the Image Fluid, we're going to get rid of Float right, so we're back to kind of just having it sitting there. No height, no width, we're going to let the column width decide how big it is. So let's first of all--- we're going to need this. So I'm going to cut it into my Clipboard. So I've gone to 'Edit', 'Cut', so I've got it somewhere. You can paste it in another document if you're worried about losing it. I always do, worry about it at least. And inside of here I want a row, inside of that I want two columns, please. And these columns are going to have my-- this first column is going to have all that stuff that I pasted. It's going to have my H1 and my P-tag, and my A-tag, and all that sort of stuff, except the image. He's going to go in this other column here. 

Now one question you might have is like, "Hey, you didn't put that internal Div." We made the col, and then normally we put in, remember Mybox? We only edit that Mybox if we needed to change the column some way. We've been adding lots of color to the background, and changing it a lot. We're not going to do any of that, we're just using it as a simple old container, and we're doing stuff with this within it. I don't need to mess with the column. Does that make sense? If I wanted to add margins to the column, to the top or the bottom, I would actually put an internal Div in here called Mybox, and do it to that, because remember, we don't like to mess with the col. The col knows where you live, and will find you. So it's going to kind of work, let's have a-- well, I hope it's going to work, let’s have a little look. 

So it's there, it's doing half and half so they're kind of 50:50. It's not quite what I need, so I need it to be, actually I want it to be, not 50:50, about 7 and 5. We get to 12 columns, which is cool. And that's going to kind of work, well, it's going to work perfectly, except now we want to work out the mobile, so that was great for this view, but when I get down to kind of this sort of size, see this Media Query here, guesses what this was, think in your head. Which Media Query is that, is that the LG? No, it's not, the SM, so Small, you know that, you got it. 

So I want to-- so both this one, and this one, I probably want them to be stacked on top, because the image gets small, it's wrecking this, and it's got enough room here, and looks good, so let's attack that. So what I want to do is, instead of saying, this one here's going to be my Medium and above. Probably you hear the thunder in the background . Very exciting here today. Not so good because I'm in a tin shed, but exciting enough. So we are going to-- I'm distracted by the thunder, and the realization that I'm in a tin, big meadow shed. Anyway, so what are we doing? We've decided that, at Large it's going to do it, but down here, it's not doing anything, it's going to-- we're going to force it to be 12. So flustered; so we are going to say at 'col=12', which assumes, "You mean Extra Small?" And because I don't say Small it's going to assume it's 12 on Small as well, and then finally when it gets to the Medium, it's going to say, "Actually, I'm going to override you," and now we go 5. Mobile first, you get it. Let's have a look. 

I know it does it by default, but sometimes, it's only because the content forces it to, you're not really doing it. So it looks good, it's all stacked on top of each other, and then when it gets to there, kind of moves this, that's why I went for the 2-column approach, because it makes this nice and easy. So a few other things I want to do, maybe lower the font size, when I get down to this one, because it's kind of breaking in weird places. And we need to play with Padding, and we need to center it, because my kind of mock-up here has the text centered on mobile. So we'll do that in the next video. That's of course if I'm here in the next video, and not struck by lightning.