Quick overview of how the Bootstrap Grid Layout works in VS Code

Hello there, welcome to the overview for the Bootstrap Layout system. Also known as the Grid system, or maybe the structure. It is the boxes that make up our website. And a cool thing about it is, we're going to write just a tiny bit of code. A Container with some Div tags in it, basically no CSS at all. Just a background color, and look what we're able to do. We've got boxes that adjust sizes, they're centered, we haven't done any of this. Media Queries are all in there already. I'm going to try and amaze you with Bootstrap and its amazing layout system. Let's get started. 

First up we're going to close down our Index page. We're going to save him for like our main website that we'll build, kind of towards the end of this kind of section. We're going to create a couple of throwaway files. So we're going to right click, 'New File'. We're going to say, this one is 'Overview', and this one's going to be-- now grid is a really clear word of what we're doing. Structure's another good word. Bootstrap refers to it as the layout. So we're going to call it that, so layout.html. So let's add our stuff, exclamation mark, '!'. Make sure that in here we add our comma. Shrink to fit, no. 

There's a couple other parts we want. We want, what do we want? We want this, the CSS. Pop it in just under the title. We don't need the JavaScript for the moment, because we're not using it. You can use all of the amazing Media Queries and Grid system, without touching any of the JavaScript. It's only if you want the kind of fancy thumbnail pop-up things. So let's first of all, down here in our Body put in a Container. Now let's put in .container. It's a nice Class, let's add some styling to it. 

Now because we're doing a pretty throwaway document, I'm not going to bother putting the style in its own sheet. I'm just going to put it up here in the Head. It's the same thing, but not a separate sheet. I'm going to say, let's give the container - get rid of the full stop. - container is going to be, what are we going to do? Just a background color. So background col is going to be random. Today's one is Thistle, it's not good enough to see on screen. Need something darker, please, random, spinning. Activated again, go back to start typing in color. It should pre-fill it in, hey, you got Magenta. Lovely pink color. 

Let's have a little look in the browser. There it is there, that is not it, because that's my Index page. Let's turn it off, turn it back on again. Nothing happens, I need to put something in the container. So over here let's put in our H1. H1, put something in there. And, ooh, you amazed? What are you amazed about? You're like, "It's just the container", but it's also a width, it has a width on it. We didn't give it a width, it also has centered, it's centered, and the H1’s been kind of styled. You've already kind of worked that out. So that's a real big benefit of using Bootstrap, you're like, "Even if you just use it for this Grid Layout system, that's just brilliant." 

The other cool thing is, watch what happens when I shrink it down. Let's go to, right-click, 'Inspect'. Let's switch it to-- make sure this is on, the device, what is it called? Device Toggle Toolbar. Turn that on, and make sure it's set to Responsive at the top, because we want to go like this, watch. I've kind of given it away, but watch, it adjusts already, for lots of Media Queries, you can see them along the top there. They're already ready to go, and even Mobile. You can see, there's some Padding already inside of the Container, that's Bootstrap saying, "Nobody ever wants their text jammed against the side, and you're like, "That's true." Thank you, Bootstrap. 

The other thing it says, is like, let's put that Container right to the edges on mobile devices, but out here, we'll give you a little bit of room around the outside. So you can do some kind of proper design rather than trying to stretch it all out. There's just some nice things that Bootstrap does. Now to use Bootstrap you really need to make sure that you are using the right language, and that's what we're going to do in this kind of section, is get you used to using the right language. I've tried to prep you for the rest of the course. That's why we called it Container earlier on, and not Wrapper, like some people call it, because in here--

Let's go to our Layout. We're going to use the documentation more and more, but under Layout it says, you can see, a Container is the word they use for this thing. Fluid containers, we'll look at later on. So we're going to go back and forth through the documentations, just till you get you used to it. 

Next thing I want to show you is what you can do inside of here. Let's get rid of this H1. Inside of the Container let's put in a dot rowm '.row' Rows are what they use as the kind of Wrapper Containers, that go around anything. The container has a really specific use, gets centered every time, whereas this is like a Container, but gets used inside of the main Container. Man, I'm spelling it wrong. Let's just do it, and I'll understand it. 

So you never have a row by itself, it always has things inside of it, and those things inside of it are normally always called cols, for columns, rows and columns. How many do we want? We'll have three. Remember, it is 'Shift-Option-down arrow' on my Mac, and that's 'Alt-Shift-down arrow' on a PC. So that's 3 cols. Let's type some stuff inside of it, this one's going to be 1, this one's going to be 2, and you guessed it, 3. Now what is fancy? We've got to make sure rows are the wrapper, and these columns are the things that go inside of it. Let's save it, let's have a little look. And in our document here, can you see? I've got rid of the H1, there's a Container, which has still got my Magenta, but you see what it did? It's separated these into, well it put them into kind of a nice little group. 

So what it's doing here, remember before, every Parent wrapper we had to add display Flex. Bootstrap by itself, without asking, assumes, if you use row inside a row, all the children are going to flex. So that's something handy, right? That's just another thing it's cut down, and you'll notice that our Style sheet at the moment just has Container, and it doesn't even need this Container background. You can see how far we've got without having touched CSS. This background here is just, so you could see it in the middle. Now that was cool, so separating them into three even groups, they have other things that make it really cool. 

Let's say we want the first box to be 8-across. So we've got the same 12-column grid. You can break your website into 12 little groups, or 12 columns. So I could say hyphen 8, under this col, so 'col-8', let's have a look. You see it updated, that is 8, and these guys, because they don't have a number, they assumed they fit the rest of it. So 8, 19, so these are two rows, and 11, 12 here. Cool, eh! We didn't have to do anything. Remember before, we had to kind of percentages, and stuff like that. It was hard going, and you're like, "This is amazing, can it get any better?" It does. 

So let's not use just the plain old 8. We can use a bit more Media Query specific. What do I mean by that? I mean that in-- let's look in our preview here. We looked at the Media Queries before. So these are all in here by default. So what we can do is easily say, this, from here, outwards, is called XL. This here is called Large, this little space here. This little space here is called Medium. This one's called Small, and anywhere below, I think it's, what was it, 576, is considered extra small. So we can use that language to kind of identify this, because at the moment they do the same thing on all of them, right? 

Nothing really changes. So let's say that I want to, I'm going to put in multiple cursor, no, let's do it. So we'll do, this first one here we'll do hyphen lg, '-lg', and we'll say, let's make it 10. So that first column is going to try and occupy 10 columns. Nice and simple, but you have to use that syntax, LG is for large, and these other two fellas-- oops, wrong shortcut, 'Command', and hold down the 'Option' key, and use the down arrow, to do multiple cursors. On a PC it's 'Ctrl-Alt-down arrow'. 

So in this case I'm going to say, large is going to fill these other two, no, has to fit one. Well, has to equal 12. Let's check in the browser. You can see here, so I'm at Small at the moment, and there's this one here, no that's Medium, and Large, look at that, it goes 11, no, 10, then 11, 12. So I can target more than one. So at Large, it's doing that, but I would like to, let's say, putting in multiple cursors, On my Mac, I'm holding down the 'Option', key and clicking, PC it is 'Alt', and I'm going to say, on this one, so there's just a space, you have to use lower case, and we're going to say, the col for, let's say the small one is going to be 6, and then these two are going to be 3 and 3, all equal 12. Let's have a little look. 

So up here it's still doing my 10, 1, 1. Now down here, you can see it there. It goes 6, then 3 and 3, and you can see, by default, just Bootstrap really wants it to stack on top of each, when it's down at extra small. You'll notice that something we tried to do lots, when we were building our website. Everything was kind of stacked horizontally, until it got to here and we stacked that on top of each other. You can override that. The weird thing about it, and I guess a good thing to mention, is that there's no XS as a-- you never put an XS here. It assumes, if you don't write anything you mean--

So if I did col, and this is going to be 4, it assumes XS. It's what's called Mobile First. We built our last website saying, we assume everything is Desktop unless told otherwise. Bootstrap has built the other way around. It assumes everything is mobile, so if I just put col without any sort of indication, it assumes mobile phone. So here we go there, 3-- ah, 4, 4, 4. 

How was that? That was a brief introduction. There's lots more to it, but I hope you can see the power of it, especially because our styling is like this, and the cool thing about it is that everyone's got the same styling. So if you take on somebody else's theme or somebody else's CMS, or somebody else's website, and it's built on Bootstrap, you'd be like, "Yes!" Because you know what these things do, and they're written the same way, plus a lot of the fiddly stuff is done, like this Container. The Media Queries are already in there, they do nice things by default. You can override them all, but for the most part, they do exactly what you want it to do. 

So that is the quick overview for the Grid, we're going to do more, but I feel like we should go through all three parts before we get into, like the nuts and bolts of building our site. All right, I'll see you in the next video.