Hello, in this bootstrap four video, what we're going to do is cover varying grid sizes. Because Up to now, we've covered the different grid sizes and the different screen types. We've got extra small, small, medium, large and extra large. And these can essentially be simulated by going on your web page and just resizing the browser. So as you can see, when I resize, it simulates the different screen types. And these are the different sizes that we've actually set for our elements using this call the screen size, the number of grid spaces that we want, at the moment, every single element which is free, but obviously can have a lot more than have as many as you want really are the same size.

But that doesn't have to be the case. We just kept it that way for simplicity, but in a proper website or a more complex website. You're going to want varying grid sizes, so this might span X amount of grids. See, that's a four on the extra small size. And then this may span eight on the extra small so so a third of the column is covered by this div. And then the other two thirds are covered by this div.

And maybe you want this one on the entire next row. So you can vary or like that. Actually, that's pretty good example, I just sort of made that up on the, on the spot. I'm going to use that when we start coding or something along those lines. So actually, I think we're ready to start coding. So what we're going to do first, it's going to deal with the Exelon.

So if we're almost gonna have like a newspaper layout, or sort of like a call sidebar layout. So for this, I'm gonna set this to four. I'm gonna set this to four nationally. Now when I set this to eight, I'm gonna copy and paste on it. Get rid of this word, copying paste this so there is three instances of it. So free of each.

Save this refresh the browser and as you can see, this spans four column spaces. And this spans eight so 4848 by if he were to start resizing it, he would just default back to the original behavior of the large medium, small and extra small. So let's start varying that applause for the large. I'm liking that afraid I'm liking that afraid gonna change the biggest voice to annoying biggest lies to a nine chain the that should be a free chain this one too annoying. I'm finally chain this one too annoying as well. Let's save that.

Refresh the browser. Obviously we got to resize it. There you go. That's it 393939 mo thinking, can you create your element, so they don't necessarily match up to 12. What I mean by that is four plus eight is 12. Four plus eight is 12.

Four plus eight is 12. Three plus nine is 12, so forth, so forth. And you can you don't have to equal 12, there's just a maximum of 12. So for this, I'm going to do a little differently. And I set this to only this are four. I set this to six, so there's actually two column spaces remaining.

I'm gonna set this to four, this to six, and this to six. So each row will have 10 spaces filled on what what happens when I refreshed the page, cuz remember, we got 4646467 can only have a maximum of 12 grits basically, on a single row. So just pause the video a second and think what's going to happen what's going to be the output from start resizing it extra large, this is large, and now we get to sorry, they we, there we go. There's the medium size. What happens, though they actually grid space is on this side here, because you can tell because there's less of a space here, and there's more space here. There isn't enough grid spaces to fill the next element.

So if there isn't enough, so you can just do some basic math, four plus six is 1012 minus 10. Because 12 is the maximum number of grid spaces, almost 10 is too so there are two grid spaces remaining on this row. Any element That is more than two spaces. We'll go on to the next row. But wait a moment, if I were to just change this one to two, watch what happens, refresh. And there you go.

This one is on the same row now simply because the four plus six is 10. We've got two columns basically remain. This spans two columns. Therefore, it will fit on this particular row. And the rest of just as well because again, they're just next to each other. I designed them that way.

So they look like they were on top of each other, but they are technically orders and you can think of it next to each other. And if there isn't enough space, it just says, go to the next row or the next line, almost like a book. When you have words in there. They obviously have an X amount of characters or x width that you can span and any characters beyond that when it works beyond that have to go down. It's a similar principle to a book you don't have. You generally don't have a book with Just one massive knock that'll be one very wide or long book however we look at this we want I guess, it will be with it'll be a very weird book.

We now have any books like that let me know I'd be interested to just google them. Okay, it's going off topic a bit. So let's do something similar with the small soil but less very even more because for now we've actually sort of been using a pattern for like free night every night every night. And I think you guessed you don't need to use a pattern you can do whatever you want. So I'm going to literally put random numbers to Sorry about that. For I was actually weird.

My phone went off from Facebook, but you will unsilent I'll have to look at after that was really worked out for us on solid unlocked and he was. Stuff happens. To this to nine. I'm gonna put this up One want to put this at 12 actually made this one really big refresh. Notice we saw you down to the small size. There we go.

It does look weird. And that's obviously why you need to plan this sort of stuff. Because if you don't, it's gonna start looking weird like this. So there we go. And as you can see, you might be thinking, What's this gap right here? Why are there no items in it?

And that's because that's technically not a row. This entire thing right here is a row. And because the contents of this particular element couldn't be fit on just one nine is splitted. Down hence made the entire column in the entire rows height higher so if I were to just Inspect Element, do I don't need that Just put this at the bottom. There we go. So if I hover over this, as you can see, he has a height of 48 pixels, this has a height of 24 pixels.

So this is double that. So it's just basically doubled it, and you'll make it bigger and bigger depending on the content inside that particular element. But when we go to the column, I mean the element after that. It this element right here. So that's the reason it's not in between there because it just had to increase the height of these. Therefore, it sort of just misses it.

And then, like I said, that's where the element of planning comes in when you're designing a website or designing anything and trial and error. So for the extra small, small size, I'm not gonna do anything because I've You should understand now, how to vary grid sizes, use multiple grid sizes. And I want you to actually try that on the small sites. Try it out on the other sizes as well. If you have any questions, anything whatsoever feel free to post them on sonar learning Dakota, UK for slash question dot php, there'll be a link in the description to that. Plus, there'll be a link in the description to today's source code, you can check that out as well.

Please rate, comment and subscribe and it doesn't really help keep the content free. Plus, it also helps us provide more content like this on a regular basis. And as usual, thank you for watching, I think you know and I say Have a great day.