So let's begin to build this out by first of all following the rule that we spoke
about is that, every grid system has to be inside a container class.
And in this case, we're going to go ahead and go with container fluid.
What that should do, is that should give us some padding on the side.
So if we go back to the browser and refresh,
you'll see that we got some padding here and it's actually 15px to be precise.
Next we need to place our columns inside a row class.
So we're going to say class and say row.
And once that's done we can go ahead and now specify a class for
each of one of our columns.
And in this case we'll go ahead and specify class equals to and
we'll say column and we'll do nd and let's say -4.
And when we do that, that will give us 4, 4 and 4, so three columns across.
Let's save that.
Let's go ahead and take a look at what we have in the browser.
We'll refresh.
And voila, we have three columns across.
Now, where did this gray and red border, gray inside and red border, come from?
Well, if we go back and we actually open up our css and look at the css >
styles.css, you'll see that actually just premade some styles for row.
I gave it margin 15px.
So between different rows that we're going to have, we have some spacing.
And row div, I basically gave it a red border and a background color of gray.
So that's where that's coming from.
So as you hopefully remember from the first part of the lecture is,
md is a sizing identifier that stands for some break point.
Let's go ahead and go to the browser, and go to getbootstrap.com, and
we'll go to CSS.
And we'll look at the grid system.
And scroll down and take a look at this table that they have here.
And it will tell you what md stands for, md stands for anything above 992px.
So according to this, it means that anything below this will cause our columns
to stack one up on each other.
So right now they're behaving like regular columns.
So if I open Chrome developer tools, as I squeeze the browser in the top
right corner we'll see how wide the browser is in pixels.
And I should be able to get to 992px wide for the screen
without anything collapsing or the columns not stacking one up on the other.
But the second I get to 991, which will be one less, so
that means the md style set of styles will no longer apply and
these columns will stack one up on the other.
So let's go ahead and do that.
So we are right now at 993, 92 and then we'll go to 91.
It becomes stacking one up on the other.
So hopefully, that kind of shows you what that md really means.
It means when the columns will start collapsing one up on the other.
So as I mentioned in part one,
that's only because there's no other styles really that are specified here.
However if we went ahead and specified a different style that will be in the range
that we spoke about which is below 992px, 991 and below.
So for that we'll say small, we'll make it six.
So if we make this six that means that column one will take half the screen.
Column two will take half the screen.
And since we're still in the same row, column three,
we'll go ahead and wrap to the next line.
And it will still take half the screen.
So let's go ahead and save that and go back to our browser.
We'll refresh.
And as we start squeezing the browser, when we get to less than 992,
what's going to happen is, is the first column is going to take half the screen,
the second column is going to take half the screen, and the third one will also
take half the screen but it will wrap itself on the next line.
However that's not the end of it.
If we go back to the documentation and take a look, this small that we
specified has a break point of 768px.
So which means that these columns will still collapse and
stack one up on the other If I squeeze the browser below 768px.
So let's go ahead and try to do that.
And we'll go back here, and 768, right