We'll come back in this lesson and demonstrate the bootstrap grid system and the grid system is probably
the number one reason that people use bootstrap the forms nap hours.
The buttons are nice stylistic changes we can make with bootstrap but the bootstrap grid system will
act as the skeleton of our entire application.
It's a really easy way for us to add structure and lay out to our application.
So let me show you a few examples of what you can do with the grid system.
I have a few sites open from Bootstrap ex-beau the first one here is a product page for a water pitcher
and scroll down.
Notice the lay out here.
We have three items side by side and then also notice as they change size here they scale down and then
when I hit tablet size they stack on top of each other.
So that's the bootstrap grid system at work as is this right here where we have another similar effect
.
They scale and then they stack on tablet and mobile size.
Here's another example.
This is Icelandic musician and Olafur Arnolds and this is scroll down on this site.
We have some content that's built with the grid system here that you can see similar layout but it's
not just that this is built with a grid system as well.
This here this content.
These tour dates here.
Basically using the grid system we can say that we want some content to take up 100 percent of the screen
then we can also use it to say that we want each one of these to take up 25 percent of the width of
the screen until we hit the mobile side or the tablet size for each take up 50 now and then when we
hit Mobile they each take up 100 percent.
Same thing done here.
It lets us divide that with the screen into pieces and pick how many pieces we want.
Each of our own elements to takeup and here's the last one we've seen already.
It's called creative Tim desert scroll down here similar content.
Here is the grid system and here as well.
So this is all done with the grid system.
All of this so really important very exciting stuff.
It helps us lay things out so easily compared to what we'd have to do without bootstrap.
So we'll be using bootstraps grid system and pretty much every application we make using bootstrap.
And let me show you one of them.
This is our yo camp application and notice that we have a grid of campgrounds for across.
And as I resize the screen notice that they scale and then we go to two across and then down to Mobile
.
We go to one across and it's a really nice easy to use mobile layout.
So that's just one place where we'll use a grid system.
Now let's get started in writing some code using the grid system so full screen this window and go back
to get bootstrapped dotcom under the Assessed tab.
You can click on grid system.
There's quite a bit to the grid system but I'm going to start by just pointing out a single number here
12.
This is really important to how the grid system works.
So every container and bootstrap can be divided into 12 different columns and then using the grid system
we can pick how many of those 12 units each element should take up.
So in this case it looks like they have something taking up about 10 out of 12 units.
And then over here two out of 12 units or might be nine and 3 but they have some ratio where they have
more out of those 12 on the left side and then a small fraction out of the 12 on the right side.
So if we go back to camp here this is our container right here.
And each one of these out of 12 units each one takes up three units.
So we end up with four equal columns and then we shrink it down right here.
Now they each take up six units out of 12.
So again that number 12 very important.
Now let's go in right.
Our very first grid.
So I have a file made grid does h t m l it's empty except for the bootstraps the SS file and to start
we need to define a container.
Anytime we use a Boucek grid it needs to be inside of a container.
So class equals container.
And the first thing we need to do is to find another div with class equal to row instead of each row
.
We have 12 units to pick from.
So what we're going to start by doing is just doing a 50 50 split we'll have 1 div that takes up 6 out
of 12 and then another div that takes up 6 out of 12.
So let's do that now.
We'll add a div and then I'll also add my second division and right now it's just two devices are empty
.
You're not going to work.
But what I'll do is add a class to the first one and this will look a little bit weird column A large
six and we'll do the same thing here.
Class equals column large six.
Then we'll add some content in here.
They will just say column large six.
Same thing here.
And as I do that let's save and we won't actually see very much we don't see the grid itself.
So to make that clearer I'll define a class here instead of a style tag.
What I'll do is define a class.
I'll just call it pink and I'll apply this class to or two divs so we can see them.
So right now they're just white.
No border.
Just a little bit of text.
But if we add this in.
So pink.
And then we want background to be pink and we'll do a purple border one pixel solid purple and then
we'll apply the pink class to these two divs.
Each one takes up six units.
Now we go back and refresh.
There we go.
You can see we have two divs that take up exactly half of the container.
The container starts here and here.
And we've divided into two.
So now we can go back and play around a little bit more and let's try adding in a third column.
And this time will make the middle column eight units and then the left and right will be two.
So end up and I'll change these numbers here.
There we go.
We'll end up with a nice centered column in the middle and then two smaller columns on the left and
right that we could use for a side bar or something.
So that's a very basic concept underlying all of the bootstrap grid system.
We have 12 units going across whatever container we're working inside of and we can designate those
12 units in any way that we want.
So we could do 12 individual columns each one column large one and we could do that 12 times just like
this.
Make sure I don't lose count.
There we go.
And then we'll get rid of these two for now.
And if I were fresh you'll see in one row we have 12 evenly sized columns.
Each one takes up one unit and then I'll also show you we can add other rows.
So let's do that now div class equals row and it will just go below this first row that we have.
So inside of this one let's do div.
Class equals column Dasch large and let's do four.
So we'll split it up to three evenly sized units.
So column arge for her go just like that.
And let's go take a look now and you can see we didn't apply the pink class but we have three evenly
sized columns that fall below the 12 evenly sized columns were created.
So we could add in the pink class just to make it easier to see what's happening.
And there we go.
So this is just a simple example.
You wouldn't actually have these pink boxes most likely on our site.
But as you can see here we have a grid where we have rows and each row has four columns going across
.
Each one is three units wide or here on this creative Tim site.
We have three columns going across each one is four units wide.
Same thing here.
Three columns going across here.
We have four columns.
Each one has three units wide.
So that's the very very basics of the grid in the next video.
We'll talk about how to make the grid responsive and have different layouts at different sizes.
Right now we've been working with column large one.
I have explained with a large means and there are three other sizes and we'll see those in the next
video and we'll also see how we can write nested grids where we can add another row inside of any of
these columns and split that into further 12 pieces.