Hello, in this video, we are going to cover more grid sizes within the bootstrap grid system. At the moment, all we did was x s, which stands for extra small screen sizes. But what also happens with the grid sizes is if you set a size for a smaller grid or a smaller screen, so we don't access, it basically bubbles up to bigger screen sizes. So if we do something for extra small, and we don't set anything for medium large, and I mean small, medium, large and extra large, it will actually bubble up. We set something for extra small and small. But we don't say anything beyond small your bubble up from small.

So that's the way the grid system works. It actually bubbles up doesn't report down or anything. So if you were to set something for the extra large screen size, you won't report them those properties won't if you go to your web browser, and there'll be a link in The description to this I don't even remember this, but we'll show you the layout grid from bootstrap there are a bunch of different properties for it. So we got the extra small small, medium large and extra large. This is a size of 34 em This is greater than or equal to 3040 M greater than or equal to 48 M for medium logic greater than or equal to 62 M and extra logic greater than or equal to 75 M and it also tells you the grid behavior the container width for this is the default one that is applied if there is no nothing else applied.

It also showed you the class prefix at the moment if we scroll down or move this down we put called excess which dictates we're using the extra small to use more you do SM to do medium you do MD to do large do LG and LG like nice good or looking goldstar they used to be or extra large is x l they put dash and put them number of columns, they all store support 12 columns, there is a gutter width of 30 pixels, aka 50 pixels on each side of the column, and the nest of offset and column ordering. But let's show you what this gutter width is, we go to our page that we've already done. As you can see, we put hello world, but it's not flush to the edge. And the reason is, I'll show you you right click Inspect Element. If you're using a different browser, the inspect element or inspecting the DOM will be slightly different.

And if we just click on one of these columns, as you can see, the main content is right here. But we have some padding on the left and the right and on the website said 15 pixels on the left and 15 pixels on the right. So that's just something to bear in mind. You can obviously override that using CSS, that's not an issue at all. So let's start covering some of these other Columns sizes at the moment, we've got extra small, but I want to chain the extra small to 12. So what this will do is put them on top of each other.

So if I do that and save it, open up the web browser refresh, actually less. Flow this right here. As you can see they're on top of each other occurs. The bootstrap column system has 12 different spaces within the columns of 12 columns. And if you try and put more than 12 columns on one particular row, you won't work it actually bumped it down to the next row or one after each of that, as you can see, 12 I think this looks great. If you're on a small screen like this is fantastic.

Otherwise, it was all bunched together. And if you had a lot of content, you wouldn't be able to read it. But on a big screen size, there are a lot of wasted space as you can see. So what we're going to do is do Call dash Excel, I'm gonna work my way down, I like to work downwards. I know some people like to work from the smallest screen upwards, it's just personal preference. I'm gonna put dash to I'm gonna put Cole dash XL dash to call called Excel dash to save that refresh our browser.

And as you can see, we have these columns with a space of two. So 246 there's still six remaining on this row. Remember, we can add 12 column spaces and if I start resizing, as you can see it's bumped down to the extra small, this isn't an extra small screen size to remember I said, if you don't set the properties for different screen sizes, it just bubbles up so it's bubbled up for the extra small which is 12. But what we're going to do is set gnarliness a cold dash LG dash Free Code dash LG dash Free Code dash LG dash free, save that bad boy, run it. And then if I start resizing it, as you can see it's now resized it, so it hit the large breakpoint, because that's what they are. That's the way it does in CSS.

It's got 369. I could have one more of these. And then after that, you'll go on to separate rows. I'm going to set the medium screen slice of code dash MD, dash four, I think four will be good. So we get a equal number of three on each row of code dash, MD dash four. Code dash MD dash four save that refresh our browser, he doesn't change.

But if we start resizing it I Okay, there we go. So let's I don't know why I didn't show them but it is now. Okay, so we have our extra large, we start resizing it. We're now on a large screen. So keep going, keep going. And now we've actually hit medium.

So we have three columns, which are of four grid spaces of four 812. And finally, let's set the small screen size of code dash, FM dash on probably a six because I think two next to each other will be good. You're have enough space to show enough information. But you want to make cramped dash FM dash six refresh now if we start resizing this as You can see it didn't cut it off it put it on top of each other because we are 612 you can't have any more grid spaces than six. So your 612 and then started again six and then we could obviously have 12 more. Also what you can do, you don't have to have each column or each like element of the same amount in the grid spaces as the next element and the element before you can vary them up and we actually recommend that you check that out because that's a very, very powerful feature.

We'll have a separate video on that as well. So thank you for watching. Please rate, comment and subscribe as it does really help keep the content free. Plus he also helps us provide more videos like this one on a regular basis. If you have any questions feel free to post them on sonar learning coda UK for slash question dot php that will link in the description to that so a free education platform with thousands of people pletely free videos. We'll also have a link in the description to our GitHub page which will have the source code for this video.

And as usual, thanks for watching, and I hope you have a great day.