Hello, in this bootstrap four video, we're going to cover how to nest columns. So what is nesting columns? It basically allows you to put columns and rows within each other. You might be thinking, why do you want to do that? Well, you may have noticed that I said a few videos ago that you can only have a maximum of 12 columns. That's still a bootstrapping design.

And they have to be whole numbers. So you can't have 6.5. Or you can have, let's say, 7.5, or something like that. But it did briefly say that technically, the way to get around that and nesting columns is that way, you don't just use nesting columns to get around that. But it's also a great way of grouping content even more so you could group the overall set of content and maybe in net group, there's several more pieces of content that you want to group. So for example, we've got this element at the top right Yeah, and for the extra last screen, so I'm gonna set it to six, refresh my browser, they go, it's six columns wide so far doesn't go to my text data.

And now inside the I'm just gonna actually delete the text and put another row. So this is how you nest column, you have to put another row inside a class row. Now inside here, you put another div, and this is a class. For this, you simply put call dash, the screen size, and then the amount of columns that you want to spend. And here's the key part. If I were to put a dash XL dash 12, this spans 12 columns, but it's spanning 12 columns in terms of Have its parent element and its parent element spanned six columns.

So if I were to put six columns, it technically spanning a quarter of the entire row because this element is spanning half of the line, and this is Spanish half of that element, aka this one here. So in here, I'm going to put div one. And I'm going to assign a color actually, we're going to create a new color for sure dye. Now won't bother. I'll use an existing color. Oh, he will use blue.

Actually, I'm also going to delete these just to make it a little easier. I'm going to copy and paste this I'm gonna change this to it to change this to green. Save it, go to my browser refresh. And as you can see, we've got a blue and green element. But if we have a look, we only have one element right here, which is red and reason we can't see any red because they're covered by it's too Child Elements. And like I said, even though we have a column size of six and a column sizes six, it doesn't span half of the screen, it spans half of its parent.

And that's technically the same with what this is doing is just because this doesn't have any other elements above it, that are set to an X amount of column space, it's actually just spanning the width of the body aka right to should I should really say the row in the container which is within the body, hence why this is working like it is so forward to put this thing for. Save it. refreshed, empty, there's a big red day because we got this element that span four columns, this element span six columns. So four plus 10. I mean, four plus six is 10. A total of 12 columns available.

12 Minus 10 is two, and we have two left over. So you don't have to fill all 12 columns, the principle is exactly the same as regular columns. So if I were to, let's say, copy and paste this, Olivia's the color green, and I'll put this I'll leave it as six. Put it as div three, refresh, and it's on a separate line, because there were only two columns left, but the free spanned six columns, hence, you went on Innova line. Again, it's the same principle as using columns as we have done before. And finally, I'm just going to show you can actually go even further and just add as many nested columns as you want.

So if I were to just do another div, row and inside here, I think you guessed it, you need to put another div with class called XML. And for this, I'm gonna put dash free dash for actually copy and paste this. I'm actually not gonna put any content in it, I'm just going to style it with some color. So I'm going to put red, green and blue, green, blue, go back refresh. You can see right at the top active progress for the put some content in the north one and two, because otherwise it's gonna be not very, very hard. See, so if I go back, refresh, so there we go, we've got one, and we have two, we just go back to it to do, you might be thinking, boy, this is spanning more than this.

It's not, it's just the background is blue as well. So if I actually change that to a red color, blue wasn't the best color, jus go back, refresh, and there we go. We've got color, we got a column, or element which spans six columns. Within that we have a number column, which spans I believe it was four spans four columns. Then within that, we got two more elements that span four columns each and there are four columns left over. So there you go.

That's how to nest columns within each other flower to start resizing this door. reason the nesting isn't working anymore It simply because we only applied it to the extra large screen size principle is the same, like I've said as columns. So if you want nest in to be done on the smaller screen sizes, you just have to apply the appropriate column, screen size and the column number of columns that you want it to span and also you can use column offsetting as well. So this is it for nesting columns. If you have any questions, feel free to post them on sonar learning coda UK for slash question dot php, there'll be a link in the description to that. Plus, there'll be another link to the source code from this video.

Please rate, comment and subscribe and it does really help keep the content free, and he also helps us provide more content on a regular basis. And as usual, thanks for watching.