Hello, in this video, I am going to give you a little introduction on to the Bootstrap five grid system.
So first of all, let me take you to the Bootstrap Solid Documentation website with some great information
on the will to cover it.
But it's also good to actually have the reference guide.
So Bootstrap five, I'll provide a link to this, not to do a little Googling.
It started OK, so we've got to lay out grid more interested and we're going to be implementing this,
but I'll explain what that is in a second.
Actually, no, this is going to be for a separate video in terms of the Soyuzes.
But just to show you, though, the six different sizes, extra small, small, medium, large, excellent,
extra, extra large.
The sizes are right here in terms of when they are essentially triggered based on your proses.
Which and the other thing to mention is if you have a certain size for small, ILGA trickled all the
way up till it hits a NOVA set in the overall overrides.
So it basically goes from a bottom up approach.
So it's basically a mobile first designed a framework.
OK, so we have this and this is what we're going to be implemented.
But this is where I recommend that you take a look at all bootstrapped websites.
We can get rid of this because all these Web sites in the body need to contain a container, which is
a div.
I have a class called container.
You will most likely only ever have one container on the page.
It is technically possible to have more than one, but it is not recommended.
And inside here you will have rows.
You can have multiple rows.
For the purpose of this video, I'm going to have one, but you can have multiple.
So row, as the name suggests, in a a horizontal layout, though it can expand vertically as well,
depending on how many columns there are, which I'm going to cover in a second, but I'm going to cover
them separately, said multiple rows and the grateful group in similar types of content.
So they are responsive together.
Next in here, we're going to have another div and this is going to be have a class of column and that
is when your data go.
So you have a container more than one row potentially, or at least one, and then at least one or more
columns.
So you call Dush, then you're going to put them, which is small, but then I'm going to cover all
agreed sizes in a separate video.
So just tell me for this dash four and I'll explain what that means in a second column for column one.
Duplicate this.
So we have three vs a one, two, three.
So if I go back reload web page, this is what we get for us to resize.
It is still sticks to three different ones.
Until I get to a point where it is too small and it's gone on to the extra small size and now it's all
on one single line.
So if a particular size hasn't been specified for small or for extra large or something like that,
then the amount of columns it should occupy for that size then will happen is what?
Twelve.
Twelve is the full width of the container.
The container does not expand from left to right fully.
It is within a certain set of boundaries which you can have a look on this website that will explain
all of that good stuff for you.
And that's pretty much all you need to know in terms of just the basics of the grid systems.
This is the basic grid, large of a container, a row and columns inside the vessel generally don't
have columns without a row, Novarro without a container.
And yet this is basically the way it works.
If said, if you don't specify one, you'll be default to 12, which is the max, as we haven't specify
the extra s'more and that is lower.
Therefore, that hasn't been overridden by the larger society we specified of small you get twelve.
Hence why we size the roll on individual.
I don't want to see rows the same Lloyd because rows they are a separate feature, but that's really
it for this video.
In the next video, I'm going to cover all the different with sizes that you saw here and.
Yeah, so look forward to that and I'll look forward to seeing you in that video.