How to use Bootstrap Layout Grid Experiment 1

Hi there, in this video we are going to look at Bootstraps layout a little bit more. We're going to mock up this one here, it's going to turn into this, over here. There's going to be some key takeaways that we need to learn before we start building our big old website. All right, let's jump in and learn how to do it. 

To get going with our first Bootstrap layout kind of experiment we're going to close down our main site and create a bit of a throw-away file. So we're going to call this one 'layout-a.html'. Let's add in our HTML stuff at the top, and remember, we need to update this one here. You can always go back to the previous stuff we've done. In your 'Exercise Files', in 'Project4', in your text document that I've made, there's a bunch of stuff in here to help us out. So this is the updated Viewport. So up here it just has that extra 'shrink-to-fit=no' for Safari, and I've also put in there--

What else have I put in here? The CSS, now you should get this from getbootstrap in case things change, but I've got one in here for you. Remember, going at the top, we're not going to put in all the JavaScript at the moment, because we don't need it for the grid. It's just all those fancy kind of sliders and stuff. We are going to put in our own CSS. Actually, we might just be lazy in this case, and just style it in this document instead of an external sheet. It still needs to be underneath this CSS. So we can still do it, but needs to be underneath it. Let's put in our Container. 

So in here we're going to put in '.container', and inside of it we're just going to put stuff, because I want to have a quick little preview. Make sure it's all working, Bootstrap's connected. So I'm going to turn it off, turn it on again. It's going to load under for document, on different screen. You can kind of see, it's working because I know it's centered. It's centered on the slide screen, there's a big gap over here. That's one of the perks of using Bootstrap but we've already learnt that one. So let's delete the text in there, we've proved it works. 

We're going to put in our top part. So our mock-up here, you would have seen at the beginning. It is in your Project4. It is called Wireframe. That's what we're going to be building in this case, this Bootstrap layer A. We're going to put 50:50 split of the Logo and Nav. There's going to be a box at 100%, then there's going to be three boxes down here. So let's put in this first two, the Logo and the Nav. The way it works is rows and containers, you can't ever skip the row. So '.row', and inside of it you put your two columns. Remember, the row name is the thing that gives the columns their Flexbox power, and it's a nice wrapper for them, so that they don't break into other parts, or other rows, or connect up. 

So I want a column, but I want times two of them. Awesome. So now we put our text in. This one's going to be the Logo, and this one's going to be the Nav. Awesome; let's have a little look. And it split them off nicely. Now let's say I want to add some color to these boxes. This is going to bring up a really good point, and a really good explanation of how to use Bootstrap, is we shouldn't just rely on the col. The col, you should use as a wrapper, and you shouldn't start styling it. If I start adding Padding to the col, and doing background colors, probably won't hurt it, but there are lots of things that will. 

This little thing here, don't try and override, just let Bootstrap control that one, and inside of these fellas add your own Class. So you're going to have like a triple nested thing. So inside of col here we're going to put in our own Class. I'm going to give it a name of 'Mybox'. You'll see now-- actually, I'll put that down on its own line, and we'll do it for two of them in a row. 'Command-Option-down arrow', or 'Ctrl-Alt-down arrow' to get two of them, and I'm going to put in, actually put in a 'Return, then I'll put in Mybox. I call things 'Mybox', 'My anything' when I'm dealing with Bootstrap, because there are, like if I wanted to add a column I'd call it 'My col', just in case, because Bootstrap has a bunch of stuff that's already named, a whole lot of Classes, and you're like, if you start being clever, like calling something Bold, you're liable to override, or start messing with one of Bootstrap's Classes. 

So I always put mine in the front of it, so I know which ones are mine, and which ones are theirs. They've got no Class that starts with 'My' in Bootstrap. So just means that I'm safe, because I've been styling things, and it's not working, you're like, "Why aren't you working?", and then you find out Bootstrap got something called exactly the same, trying to do a different thing. 

Now inside of these, this is where I can start doing my stuff. So multi cursors, I'm using the 'Alt' key, or 'Option' key on a Mac, 'Alt' key on a PC, to click twice, and-- I don't want to do that, do I? I don't want Logo and Nav, so Logo, Nav. Let's have a little look now, it's going to look the same, but now I can go off and start styling Mybox. So up here in my little Styles thing here, I'm going to say '.mybox', it's going to-- let's just add some basic stuff to it. Let's add a background color so we can see. Has to be lower case, 'background col'. You can smash in any one that is there, and it's pretty good. I'm going to use Hot pink to match our little mock-up there. We'll add some Padding to it, just, we'll add some minimum height as well. minimum height of 20 pixels. 

I still got my croaky voice, started way too early this morning, and coffee's not even helping. So we're going to do Margin, we'll do top and bottom of about 20 pixels, just to push them apart, so there's a bit of white gap between them, and we'll do top and bottom of 10 pixels. Let's have a little look. How are we going? Looking good, maybe some Padding on the inside of these guys. So a little bit of Padding all the way around of about 20 pixels. I only add it in this stuff here, it doesn't need to be there at all. I just want to, A, show you what to do if you do want to style the columns. Don't actually style the columns, you could put '.col' up here and start messing with it, and it will fall apart. And we're adding it so that we can actually see it, rather than just kind of like, me say, "Don't worry, it's there, trust me." 

Next thing I want to do is-- where's my mock-up? I want this big Hero box in the middle. This brings up another good Bootstrap strangeness. What I'm going to do is put a few 'Return's here, just so that I'm really clear about, kind of the outside wrapper, and all these internal ones. So I want one line, I can't just put it in a col, and start styling that. It needs to go inside of a row even if you just need one of them, because the row wrapper gives the col its super powers, with it's Flexbox-ey goodness, plus otherwise, these guys, if I put another col underneath they're going to start rolling together, and all try and squeeze onto the same line. So our row's kind of like a line break as well. So in this case, is going to be my Hero box. Let's have a little look. It's not going to work, well, it's kind of going to work. I want to put in that Div on the inside. So in here I'm going to have one called 'Mybox', and in here I'll call this one 'Hero box'. Nice. 

The last part of our mock-up is, let's have a look at them. It's one, two, three, kind of all cross evenly-spaced. This is a nice easy one to get a start in Bootstrap. So we're going to do a row, but let's do something fancy. Let's do some image stuff, a row, inside of it, that little less, greater than, '< >', and inside of there I want a child of col. How many do I want? I want three of them. One row, three columns, and this is going to be Feature1, 2, and 3. Let's have a little look at what we got going. Kind of, I forget every time. Let's delete, let's get rid of that stuff. Let's say I want to put in my '.mybox'. Then I want to times that by 3. It's not what I want to do. I'm just not thinking, it's early. 

Let's say I want to do it all in one go, you're like, "Show me how you do it all in one go?" Can do. Let's get rid of that as well. So we want a row with-- inside of that row, we want to put col. Inside of that col we want to put in mybox, but I want three of them, but if I just do it like that, it's going to kind of give me kind of what-- so what I want to do is wrap this part in brackets. So that it predicts it, and tries to put in their closing bracket as well. So I want all of this wrapped up together, and then times it up by 3. Sometimes you got to kind of start again, there you go; fancy. I'm going to put my flashing cursor here, and we're going to do Feature. I'm going to do Feature1, 2, and 3. Let's have a little look, nailed it. There you go, there's our mock-up, that's it in Bootstrap. Super easy, but the takeaways for this one is making sure, you use rows even if you want to use just lines by itself, just one old column, all stretching all the way across. 

The other takeaway is to make sure you don't style the row, the column, or the container. It's best to add your own Classes to it, and let it do its thing. I could style the Container here, but it might be nicer to add a second Class called 'my container', or something else, whatever you want to call it, so there's two things applying. You're not trying to mess with that one, they're all kind of, it's just a good general rule for Bootstrap. And why do we like it? A, it's done the Flexbox stuff for us, and it's added Media Queries for us, and it breaks down nicely to smaller devices. Let's go right click, 'Inspect, see what it does at mobile by default. Let's make sure your Device Preview little toggle switch is on, and I'm going to go down to iPhone X, and it breaks down nicely. 

All right, that is our first experiment done. Let's move on to the next one.