How to create uneven col widths in Bootstrap 4

Hi guys, the goal for this class is to fill out this top Navigation, or finish it off at least. At the moment they are evenly spaced. I want the Logo to be smaller than the Nav. My drawing's not great there, but this one here is the width. It's just shorter than this one, so I'm going to show you how to kind of have different size boxes, and then I'll show you just an example of where these things are nested, inside of things that are nested, inside of things that are nested. Just to have a really good understanding of that before we move on. I hope you're ready, I'm ready, let's go. 

So what we're going to do is build in this kind of middle part as well, and we'll make uneven boxes here. My drawing here has been-- that's meant to say this is smaller than this box. I'm not sure I exaggerated it enough. So we're going to do uneven box widths, and we'll also do nesting inside of nesting, just to show you what it all kind of does and looks like. 

So first up, into VS code, they're uneven boxes, so we've got two of them here, right? We've got my first row, which is going to be my Logo, and let's put some text in it so we know which, who's is who. It's going to be Logo, and this one is going to be the Navigation. So my drawing here shows about four, so the rest will be six. So up here, we looked at it a little earlier, but I want to put this in its own little video, and show you a couple of different ways. 

So if I say this first one is a col of '-4', it has to be written exactly like that. It will do amazing Flexbox stuff, and before. And this will just guess and fill the rest of it, because it's in the same row, which is inside the Container, which is inside the Container Fluid. So all this nesting is useful, although it looks a little messy in the HTML. So you don't need to write explicitly that this is the width of 6. You just need to say that this is 4. 

Other thing you can do is you don't have to use the columns, just so you know. You'll run into websites that do this. Instead of col4, you can say it's a width of, let's say 25%. So W for width, hyphen 25, 'W-25', hit 'Save', and we'll get a similar sort of result. Width 75. Shifts it across the other side. So it doesn't matter whether you want to use percentages, all those columns. I use columns, some people use percentages, no problem with the percentages, is they only have some real basic defaults. 

So in the 'Documentation', under 'Utilities', under 'Spacing', you can do width of 25%, 50, 75, or 100. There's no like in-betweens, so if you try and type in 52, it will freak out. There is an option for the height as well. So you can do H 25%, height of 50%, 75, it's of the Parent. So if you did it inside of our Header, or inside of, which part? Inside of this, we've given it a height of 200. So it will use that as its, like 25% of this Container that's it in. So I've put it back to column 4, and I want to show you a couple other things. 

So we're going to put in this big Hero div, and we're going to put these two guys inside, to show you how that kind of nesting works. It's not terribly complicated, but it's sometimes good to just to see it. So we've got our Fluid Container, and it opens there, and remember, if you click inside of it, highlights it down here, which is kind of where I want that one to end. I don't want to start putting my next part inside of that Fluid Container, otherwise it will get gray down here, and I want to leave that gray box finished just there. 

So we're going to start a new Container afterwards. I don't need this to be fluid, I don't need a color going to the outside, stretching across. Even if I did I probably would just color the Body Copy, uh, the Body Tag, which is underneath it all. I'd just probably color that if you did want to do that. So got a Container, and there's only one box in it. We'll do this in a second. So we have one row, remember you've got to have a row, and inside of it we're going to have a column. So you always have a row even if you only want one column. Inside of this we're going to put some Lorem Ipsum. We'll put in 100 words. Let's have a quick little--

They need to go inside the P-tag. So what I might do is do that first, P-tag, then do Lorem 100. Let's have a look in the browser. Perfect, it's kind of matching my design at least. Also what I want to do is I want to make it red, because I'm going to wrap it all up in this Mybox1. All of you, I'm going to go inside that. Remember, 'Command-Shift-P' on a Mac, 'Ctrl-Shift-P' on a PC. I'm going to wrap with abbreviation, and this one's going to be '.mybox1'. Let's have a little look now. There we go. Hey, you're like, "Man, there's a lot of nesting going on", but it's not too bad, right? 

Where it gets even more complicated, is we want to split Mybox into a couple of extra parts. We want to get these two green guys inside. They're going to be equally split, even though my bad drawing looks like this one's bigger than the other, you can do what you want. So nesting again, so where does this go? It needs to go inside my Mybox, because I want it inside, because that guy will make some red, right? Mybox up here, says, be this tomato color. So I want it inside of that, so I'm going to click on the 'Div'. It tells me that's where it ends. 

So it needs to be inside that. I'm going to put a 'Return' in, and I'm going to put in another row and two columns. You're like, "But we've got a row." Every column needs to be the direct descendant of a row for this to work. Like we did in Flexbox, that's why we kind of spend a bit of time here, learning Flexbox, so we need a row, we're going to try to be fancy here, and inside of that row I need two cols, but we'll have two of them; nice. 

I'll actually apply a Class to this. 'Command-Option- down arrow' to get your cursor doubling up, or 'Ctrl-Alt-down arrow'. You're getting sick of the shortcuts, you're going to dream of these shortcuts, but you're not going to forget them. This one's going to use the other green Class. So this one is going to be called 'Mybox2'. Inside of them I'm going to type in 'Feature', no, what is that one? Nested one, it's called Nest1. I'm looking at my little drawing here that I hand drew for you fellas. This one, Nest2, let's have a look in the browser, there we go. 

So that's kind of strange, nesting inside of other existing columns. You need the second row, that's what these guys need. So that they get their power, and so that you can later on, maybe on mobile, stack these guys on top of each other, and it's really easy to do when hose columns are inside a row. So the big takeaways for this video, is uneven sizes, because if you leave it by default they will sit side by side, 50%, occupying the space, unless you put 3 in, then they'll occupy kind of just three spaces, all being about 33% each. They'll just divide it up amongst them. If you want to force them, you only really need to force the first one. In our case we did the col4, but you could do 'w-25' to get something similar. All right, friends, I will see you in the next video.