Hi everybody. Today, we're going to talk about the grid system for Bootstrap three. I want to start off by saying, if at the end of this video, you completely understand the Bootstrap layout system, you are awesome. Because for most of us it takes at least two or three times of looking at the material, playing with it and then doing it all over again, to really get a good understanding of how this works. So, I'm hoping that you'll follow along with me. We'll do an example in one of the next videos, and then you come back and you listen to this material again, and see if it's starting to really make sense. Bootstrap can see every element as something you can break down into 12 columns. So, if you have a page, Bootstrap can take any element, and say, oop, all right. There's a container, let's pretend I drew 12 columns. We can break it up and then you can tell Bootstrap whether you want to place something here, or here, or maybe all three of these. Now it's kind of funny because for the longest time people said never use tables to layout the content of your webpage. That's breaking really, some of those basic rules and tenets of content versus layout. But, that's why everyone says Bootstrap uses a grid. It's not a table. So, you kind of have to throw that practical reasoning out for a little bit, if you're going to be using Bootstrap. With this table, we can basically say if you want to use three columns, it's the same as saying a width of maybe 25 %. Six columns is 50%. Nine columns is 75%. All 12 columns means you're taking up the full width of the page or that element. Every grid in Bootstrap consists of a container class, a row class and then one or more column classes. So the actual code itself is going to look like this, where xx is going to be the viewport size. And yy is going to be the number of columns that you want to use. Let's take a look. So let's look at our example. The class is always going to start with those three letters, col. The xx component is the viewport size. So it's going to be xs for extra small, think your mobile phones. Small for, maybe, those tablets. Md for medium. And lg is for large. Again, if you want to kind of think of numbers, you can think of something along the lines about 480, 720, 992, and 1200. Now, I promised you awhile ago, you don't actually have to remember these numbers. I'm pretty sure that I got them wrong myself. So just remember more general concepts than the numbers. But you have to remember xs, sm, md, or large. It has to be one of those four abbreviations. Once you've declared the viewport size, you can now say exactly how many columns you want this element to take up. Anything from zero, which means it shouldn't show up at all to 12 which means take up the maximum width that it possibly can. So if you have an element that has class equals col-xs-12, you're saying, if you're viewing this on a small screen, it should take up the full width. If you're looking at one that has a class of col-sm-8, now you want to take up eight out of those 12 columns, but only on the smallest screen. For col-md-4, you're saying, if I'm on a medium screen I want to use up four columns or one third of the entire screen size. And for col-lg-3, you're saying, well this is a large screen, it doesn't need to be as big as it was on those other screens. Let's just use up a quarter or 25%. Now, this is the interesting thing. Many times you're going to combine these classes together. So let's think about if you're going to put pictures on your website. It's a very common idea to think, well on the small screen I want one picture, and each picture should take up the whole width of the viewport. But if I'm on a larger screen, well, then maybe there can be three across, and on a different screen maybe four across. So let's imagine that I have an image, some sort of pic.jpg. And then we have our four screen sizes. So I might have my extra small, small, my medium and it's not quite going to look larger but my large. When you look at col-xs-12, that means my image should take up pretty much the whole width. But, if I'm showing this image on a small screen, I only want it to take up about half the size. That way if there's other images, they can fill in next to me instead of under me. In the same way, if I'm going to have a medium screen I only wanted to take up about a quarter leaving room for three other pictures. And then, on a large screen I'm going to draw it really small just to kind of be the side be like, I only want that to take up one sixth. So it's the same picture. It's the same HTML code. The difference is that, on different viewports, the picture is going to look relatively big on a small screen and relatively small on a larger screen. So let's review that grid picture but using the classes this time. Right here we have nothing on there. But if I use col-XX-3, we're using three of the 12 or 25%. If I say col-XX-6, I'm using 50% now. Col-XX-9, 75% and col-XX-12 means used up the full width that's available to you. But what if you want two elements next to each other? For instance, but only on a larger screen. Separate block, small screen. In line block on a large screen. Well, what we could do is we can start off by saying, that yellow part of our page, well, on a small screen, I want it to take up the full width. But, on a medium screen, I want it to take up only three. So on here when I'm looking at a large screen, I'm only taking up one, two, three columns. All right. Then if we add another div next to it, that div can say for this orange part, if I'm on a small screen, again, I want to use up the full width. But if I'm on a medium screen or bigger, whoa, well in that case, I want to use eight columns. Now, if you're following me, hopefully you are. Wake up, wake up, you'd realize that 3 plus 8 only equals 11. I didn't use the whole screen. I did that on purpose because I want to show you that it's absolutely okay to not use up the whole screen. The second thing you might be wondering is what about small and large. I didn't say anything for those. I didn't mention them at all. Everything, since it's a mobile first, propagates up. So if I define something for extra small, then by default it's also going to apply to small, medium, large. Unless I specify something for medium. And then that's going to override everything for medium and large. So you can really get away with just specifying one or two rules and still hit multiple break points. It's actually quite possible to write even easier or cleaner code than what I just wrote here. Whenever you want to say something should be the full 12 columns and it's block already by default, it takes up the whole width. You can pretty much skip this whole col-xs-12 part. Bootstrap knows to do that by default. It says I didn't knew you were supposed to take up the full width, you don't need to tell me. Instead, you can just specify those rules where it's going to change. So I've dropped the smaller part and this new rule now says basically any time you are on a medium viewport or larger, make it three columns. By default, Bootstrap is going to put things as far to the left as it possibly can when it's positioning them. However, it is possible to add a push and a pull class on different elements. If you have col-XX-push-YY. You're basically saying, hey, on any viewport that's X, I want you to go ahead and push this element Y columns to the left. In the same way, there's a pull. In here, you move columns to the right. We're not going to play with this right now, but it was something that I want you to be aware of. In the same way, I want you to know about the responsive utility classes. Earlier, I mentioned that you can have XX, or something like XX column zero, or really for anything, you can have column zero, hides it from the screen. It's usually a lot easier to use the hidden class instead. Hidden-XX basically says, make this visible on every viewport except for the one we're going to mention right here. In the same way, visible-XX says, hide something. It shouldn't be visible unless I'm on this certain size screen. The last one we have is sr-only. And this is a special Bootstrap utility class for screen readers. It hides the content for everyone, unless they're using a screen reader to access the page. If they are, then this element is visible to them, and them only. So, we mentioned and we talk a lot about Bootstrap is this mobile first idea and that larger screens inherit values from smaller screens. I really think that the grid class is a great example for you to play with it and see how they work. The idea that if you define something from medium screens, it also applies for large screens. If you apply something to extra small screens, it also applies for every screen size that's bigger. There's a great site at Bootstrap, bootstrap.com/examples/grid, where you can go through and you can see some of the examples that they have coded up for you. Really important, do the math. If you've got maybe a third grader or a fourth grader at home, someone who's about eight to nine, have them check. Because one thing you always want to make sure you do is that the columns that you want to be next to each other, shouldn't add up to more than 12. Seems like a simple thing, but it's very important. In the next video, we're going to code together and do some work with this grid class. I hope you'll join me and you'll get a really good feeling about how this works with Bootstrap.
