Hello, in this bootstrap version four video, we are going to cover the grid system inside bootstrap. And the grid system is one of the most crucial and important aspects of why you would use bootstrap. So what is the grid system, it basically is a system that has columns. And it's it's fantastic. It has 12 columns, so 123456, all the way up to 12. And you can create elements that span an X amount columns, the number of columns, each element spanned has to be an interject, there is a way for two decimals, but not really going to be covering that because it's more of a fudgy way you can't do like 3.5 you have to put like columns within columns and sort of let's do half of what the parent column is.

But if you just generally you probably won't want to be dealing with that, but we're gonna have more videos covering kotlin. So you'll learn about how to nest And, you know, offset columns. So let's start coding, the first thing you want to do is create a div that's going to get rid of that div. That's not what to do look like div. And this needs to be the class of container. You can think of the container as grouping all your website main content.

Can you have more than one container? Yeah, you can. That's sort of the reason why there's classes. But generally, you're not going to you probably is going to have the one container. But again, there's no reason why you compress the way to think of the container. Within that you put a nother div, which has a class of row and you can think of the row is a way of grouping items together, so rows of items, so it's very common to have several Row rows, can you have rows within rows, you most certainly can.

And we'll be covering that in future videos. And within this is your column system. So to create some columns, you do div class call. And now you put the size of the column and the amount of column space that you want to cover, we're going to put Xs which stands for extra small screen sizes. In a separate video, actually the next video, we will cover the different grid sizes so we got extra small, small, medium, large and extra large, but that deserves its own video. So for now, it's going to cover extra small per dash and then the number of grid spaces.

You want your column or your element to span log so before the maximum of 12. So I'm going to put four side here I'm gonna put Hello column four. I'm just gonna leave it knock, I'm just gonna put hello world. I'm going to simply copy and paste this and leave that as it is. So this bad boy, open this up in my web browser. And as you can see we've got different columns which corresponds to these are here the CO dash Xs dash for the for start resizing my web browser, they also start moving and resizing like so which is really cool.

So we've already got a responsive website. But to illustrate the sois of each column or each element with column dash x S dash form, add an extra class called gray. And for this I'm just going to set the text color to white and the background to gray so you can actually see what is happening on a put a style tag in the head section right here. Generally speaking, you want your CSS styling in a separate CSS file. But for the purpose of this series, I'm going to keep it simple and put it inside here. We're not going to do a lot with it.

So a gray color, white background color. For this, I'm gonna put gray. Save this bad boy. And now if we run it, there you go. We have our column system. As you can see it is gray.

I'm just gonna put this as you know what, I'm gonna create several different ones. I'll change this to red, green, and blue change the color to red, green, blue so RG p, changes to read so you can easily see because otherwise He's just a mush of gray. So save that. refresh our breath. And Alex, you've got the different columns so that the red, green and the blue, and they are all of equal sizes. So if I start resizing my web browser, they start resizing, but they remain equal in terms of size.

So that's the basics of the grid system. In bootstrap. We have not covered the entirety of the grid system by any means. There's a lot to cover. There'll be loads more videos on this, so check them out. If you have any questions, feel free to post them on our education platform, sonar learning code at UK for slash question dot php, there'll be a link in the description.

It has thousands of free videos, so check them out as well. Please rate, comment and subscribe as it does really help keep the content free. Also, we'll also set also twice also Have a link to GitHub, which will have the source code from this video. So check that out as well. If you're a little stuck, always want to simply copy and paste it. And as usual, thanks for watching and I hope you have a great day.