How to make 100% header & uneven widths in Bootstrap 4

Hello there, we are going to build this other random group of boxes. Why? So we can learn various parts of Bootstrap's layout. The first part in this video's topic is going to be, can you see how this gray border goes all the way to the edge of the browser, but then, this internal box are nested, and they're all in the center. This is the end result, goes all the way to the outside, and when it gets smaller, it kind of-- the nice little boxes react to the Media Queries, but they're all trapped inside this kind of like internal container. The shortcut for this one, if you are coming back to this video, is basically, the External wrapper needs Container Fluid, and a Container on the inside. Let's talk about it a little bit more in the video, let's get started. 

First up, close down anything you've got open. We're going to create-- we were working on Layout A before, let's make a second version. Just another kind of like a throw-away file, just to learn stuff, and keep it nice and tidy, so you can find it later on. This one's going to be called 'Layout B'. And we're going to add all the text, we're going to just steal it from Layout A. Select all, copy it, go to the Layout, close it down, Layout B, paste it in. And let's delete the stuff we don't need. So let's get rid of, first of all, we're going to do our styling in the Head, perfect. Probably going to use a lot of the same stuff. 

The main things, let's get rid of everything in the body for the moment. To know you've got everything, click on the top one, you can see, there he is down there. It kind of gets partially highlighted. So we've got everything gone in the Body. We're going to create a couple of Styles. This one's going to have more than one style. So we're going to have Mybox 1 and 2. I'm going to use everything from before, the same minimum height, the margins, the padding. We'll just pick different colors to match our-- where is our-- Wireframe Layout B? So 'Exercise Files', 'Project4'. There's one called 'Layout B'. 

Cool, so that's what we're doing. We're going to need a couple of colors. We're going to need this kind of red, we need a green, and a gray. All right, this first one I've used tomato. We'll do a second one, copy, paste. This is going to be Mybox 2, and this one's going to be Lime green. No, Spring green, I like Spring green. So two boxes, and I just need this, just because. I'm going to put a background color on, that, where is he? There. See this background color here, on the gray, I'm going to add a background color of gray to this whole kind of like big, full width heading, and I'm going to call this, instead of calling it Heading, I'm going to just call it bg1, dot bg1, '.bg1', or 'mybg 1'. If I can type it, bg1. 

That is just going to be my background, because I might use it at some other places, I'm reluctant to call it like, Header gray background, because it might be used for something other than the Header, and it might not be gray. So mybg1, in case I need a background 2. And this is going to have a background col of, we're going to use, I'm going to use the Slate gray. Is there a dark Slate gray? There is, dark Slate gray. Cool. We're going to use those to do our sliding. 

So first up we've done a Container, and our Container sits in the middle. Let's have a look at the Bootstrap kind of documentation. So click on the 'Documentation' tab, and click on 'Layout', and it will give you a brief introduction. That's what I'm here for. We've used '.container', and it centers it in the website. This Container Fluid is what gets it going all the way to the edges. So let's have a little look. Actually, let's quickly look at the structure. So we're going to have initially this Fluid Container, and inside of it we're going to put the Container. We did something similar earlier on, nesting inside of things, but we're going to, instead of using our Margin Auto on both sides, to kind of get things to center, we're going to use our Container and our Fluid Container. 

So let's create a Div in here called 'container-fluid'. Awesome, that's applied more than one Class. So just after this Container Fluid, we're going to add our 'mybg1'. And let's just put in some text just so that we can see it. Just make sure it's actually working. Let's have a look, go 'Live'. Awesome, so we got a Fluid Container that goes all the way over. There's some text in there, just holding it open for the moment. I'm not going to add a height to it, I'm going to let the Header inside of it do that. So inside of this one we're going to put another Div Tag, but this one's going to be called Container. Awesome. And hopefully we can put in some text in here. What I might do for-- actually I won't. Let's have a look, make sure it's centered. Preview in the browser. The text is a little hard to see, right? You can kind of see there, so it is trimmed up to the outside. So there's an external Fluid Container going to the edge, and inside of that is one that kind of operates, on those Media Queries that Bootstrap has. Lovely. 

Next up, inside of this Container we're going to give it some text, and we're going to put in our row. And inside of that row I'm going to have-- let's have a look at our mock-up. Got two columns, so put those in first. So I'm going to have a col, going to times it by 2. And this one, we're just going to put some text. Actually we're not going to put some text straight into this one. We're going to put another Style inside of it, because remember, I want to make them this color, want to make them red. I don't want to add it to this outside Wrapper col, because it ends up messing things out, so we're going to put it as another nested thing. 

So we're going to put in a Div which has our Mybox. We're going to use Mybox1 in this case. We need two of them. Beautiful; you need a container. In our case we needed two, because we wanted to do two very different things. We wanted to say, stretch to the edges, but also a Container that is nested inside. So that's what we've got, we got this Container, regular old one that has a width, inside of this stretchy one, which is the Fluid, and inside of that, I wanted my two boxes. these two columns here can't exist without a row. 

So these two columns have to be inside this one row, because remember, the row gives it all its power. Then I want to do some fancy styling, as in, mess with the margins and the Padding. If I didn't need to, I could just throw my logo inside of this col here, but because I want to do something with the margins, the padding, and the height, it's best not to mess with the col too much. So I'm going to do it inside of this one. This is where it gets kind of, I guess, there's a lot going on there, but I hope you understand it. Let's have a look in the browser. How's it doing? Great. And because of Bootstrap's magic, we should be able to right click, 'Inspect'. If you haven't got it on, turn the 'Device Preview' icon toggle on. And it go responsive, and it should jump up and down in terms of sizings. Mine's set to 100%. You can see, the Media Query's breaking. Nice work, Bootstrap. All right, let's get on to the next video.