And welcome back.
We left off with our really quick website that we built using Bootstrap.
But I want to show you one thing that I've kept from you, and that is the layout feature in Bootstrap.
And this was the primary reason that Bouchareb was so popular, because layout was so difficult and
we didn't have Xbox back in the day, Bootstrap allowed us to create very responsive websites using
these ideas of columns.
To show you what I mean, we're going to create our own column system.
We're going to go back to our website and I'm going to delete everything that we created so far.
And to save and refresh, everything's empty, so in bootstrap, you can do something like this, you
always want to wrap everything in a container and again, if you go to the documentation.
I'll show you what to do and we'll just grab the top ones.
So let's just copy these fixie indentation a bit.
There you go.
And if I refresh well, we need to have a bit of a background so we can see them.
So I'm going to say Collum.
We'll do background.
Color gray and the border will be two pixels, solid black save.
And go back and refresh, we have our borders.
Now, here's something interesting that you can do.
You can do Collum small six and then Collum small three.
Don't worry, I'll explain what that means.
I'm going to refresh and look at that.
The size of this.
Just got smaller.
And that is because Bootstrap has the idea of a grid system and this grid system has 12 lines.
So six plus three is nine.
So it's saying that I want this column to have six spaces out of that 12 and this column to have three
spaces out of that 12.
So if we add a nother column.
And six plus three plus three is 12.
I'm going to say extra here, I refresh, you'll see that it fills in this gap.
What if I put in for here, so that is 13, which is over 12.
Well, if I refresh, this goes down to the next level.
So you see how easy it is to control things and bootstrap.
I could also do something like Collum, extra small will be 12 and then Collum extra small six column,
extra small six and actually will do.
Medium here.
Save let's refresh and see what happens.
Well.
What this is saying that if the size of the window is medium, then I want the whole 12 grid system
to the first five and then six of the 12 to the second and then the extra one six.
So you can see here that that's medium.
But because we have these small properties in here, if I make it smaller, you can see that it resource
down to the six, three, four grid.
Let's change this back to three so it looks better and show you that there's a few other sizes that
we can add.
You can see over here that we have grid options and we have small, medium, large and extra large.
So let's do large and see what happens.
So for large, I want to have everything on their own so we can do this.
And save, let's refresh and see if we can guess what's about to happen.
I'm going to go from.
Medium to large, do you see that 12, 12, 12, so I want each div to occupy 12 spaces, 12 grid systems,
which is the full thing.
If I go to medium, I now occupy with the first one 12.
The second one, six and six, they should be one after another, and if I go down to even smaller.
The small will have six, three and three, so this is how you can create really responsive websites
and that was the biggest selling feature of Bootstrap.
It was solving this really, really hard problem of making sure that our website looked good no matter
what the screen size.
So I wanted to play around with the great options here.
This is the hardest concept to grasp and bootstrap.
Once you've learned this, it's very, very easy to create websites extremely fast.
I'll see in the next one by.