Hi everybody. Let's go over an example together where we're using the Bootstrap Grid System. I'm going to go into CodePen and use this code so you can start from scratch or mess with the code and play with it with me. So, as you may recall, whenever you want to use the grid system for Bootstrap, it's important that you put two kind of wrapper classes around it. So here, I have my class = container, and my class = row. What I'm saying here is, it's time to look for those col-md-6, col-lg-2 different classes. And I want you to put these elements together based on being in the same row at times. I'm actually going to move this. So I'm going to bit of a smaller screen to start with. And when we do this, we're going to go through and look at how the code works together. We don't even need to really look at the CSS for now, so I'll pull that out of the way. I have four divs inside here. Now, in each case, each one of these divs is exactly the same. The code doesn't change at all. You can kind of trust me on that one. So we're just going to look at the first one, and look at what that code does. The first thing we need to realize is, hm, col-md-6 and col-lg-3. How many viewports do we have right here? How many different distinct looks are we coding for? At first glance, your answer might be two. We're coding for the medium and the large screen, but don't forget, Bootstrap is always thinking, mobile first. So, by default, we have an extra small, maybe small view. So, this, what we've done right here, is we've now made it so there are three distinct views. One, for the extra small and small screens, one for the medium screens, and one for the large screen. By default, whenever we're on an extra small screen, and we didn't say anything else, Bootstrap is going to say, you're going to do a div, and you didn't tell me what to do. No problem. Let's make that sucker full screen. We're going to by default use all 12 columns. So, that's why this little div right here says, extra small and small screen. So my question is for you. Why is it not showing medium screen and large screen? Why isn't that information showing up? Well, it's back to those Bootstrap utility classes. Down here, I have visible medium and visible large. This essentially says, you know what, I don't want you to show up unless I'm on a medium size screen, and down here, I don't want you to display unless your on a large screen. As we transition from smaller to bigger, this one's going to go away, and this one will suddenly show up. So let's take a look. So, right here, I've just hit the medium view port screen size, and a few things have happened. First, the div that said extra small and small screen, it disappeared. It is now no longer visible. The second thing that happened is that the medium divs now have become visible. We couldn't see them before, and now we can. But the third thing that happened, that you might not notice unless you really are thinking about it, is before each div took up the full width of the screen. Remember, we had four boxes, boom. One, two, three, four. Now, instead of taking up the full width, we're only taking up six columns. We're not taking up 12. So, we've really changed the look of this. We've changed the content, but we've also changed the layout. So instead of having four on top of each other, we have two pairs of two. Last thing I'm going to do next, of course, is go to the even larger screen. So, in this next step, as we reach the larger screen, the same type of thing has happened. The extra small and small divs, still hidden, still not there. Can't see this one, can't see that one. Now, the large screen information is visible and we've triggered this rule right here. We've said, on a large screen, I want each one of these divs to take up 25% of the screen, 3 out of those 12 columns. And now everything is laid out in one big view. Hopefully, at this point, you have a few questions. Unfortunately, I'm not right there to answer them. So, I'm going to have to guess and maybe try to figure out some things that you might be wondering right now. I know one that I was wondering is this whole idea of what's with the extra space along the sides? Each one of these columns is supposed to be about 25%, but there is a lot of blank spaces around. One of those reasons is that the container class and the row class has padding and margin around it. So, this is kind of dead space, same over here. So we might be using up 25% of the space, but that's really only from here to here, not the full screen that's something that's important to realize. The next thing that you may or may not be wondering is how I manage to style, maybe the colors of the fonts or those borders around things. Feel free to go in and look at all the code that I have here, not just the HTML. I'm going to pull my CSS back over. And you can see that I have written some style sheets that say, you know what, I want you to add a border but only around those classes that start with the word visible. And you know what? On any class that ends in large, I want you to have it the red, any that ends in medium, the blue, etc., etc. With this class, we may not do as many lectures as I've done in some of the other classes. There's a reason for that. I want you to spend your time playing with the code. Listening to me is awesome, I know it. But playing with code may be ever better as far as learning things about what you're doing in web design. So play with this code, change things from visible to hidden. Go ahead and put in different numbers to see what happens. It can be a lot of fun to play with things, and make things, break them, and fix them again. Good luck.
