[SOUND]

Probably one of the most central components of

Bootstrap that allows developers to easily create responsive layouts
is the grid system. So let's go ahead and
take a look how it works. So here's a quick snippet of
HTML that's going to help us go through the different
components of the grid system. So pretty much any Bootstrap
grid layout is going to have these components as part of it. And, as I mentioned
before, you could see that it does impose a bit
of a structure into your HTML code but most of the time it would probably come
up with this type of structure anyway. So let's go ahead and
take a look as to what the structure is. First of all, your Bootstrap grid always
has to be inside of a container wrapper. There are a couple of choices for that.
One, you could use the container class or
you could use the container fluid class. The container fluid class stretches your
layout the full width of the browser and provides consistent padding around
your grid and other content. There's other content that could go
into the container, not just the grid. It's just that the grid requires that it
should be inside a container wrapper. So that's container-fluid. Regular container
class has predetermined fixed width that is still responsive
based on the width of the browser. In other words,
it has certain width of one break point, a different width at a different
break point and so on. Remember that break points
are those media range boundaries that we covered in one of
the previous lectures. The next component of the grid is the row. So the row class
creates
horizontal groups of columns which means that the columns collapse and
interact with each other as a group but independently from columns in another row.
The row class also creates
a negative margin, to counteract the padding that
the container class sets up. Now why is that done? Well, each column already
has its own padding because we want to visually
separate columns from each other. If negative margin wasn't applied to
the row, the padding of the container would then be in addition to
the padding of the edge column. So the content of the column will no
longer align nicely with the rest of the content outside of the grid. Now the
Bootstrap documentation actually
talks about this and explains it. But to be honest,
I myself stared at it for a while before I finally understood
what it's trying to say. So let me put together a quick diagram so you will
visually see
what we're talking about. Okay, so obviously I'm going
to start with the browser and then I'm going to visually build up what
our grid layout is going to look like. So the first thing that the documentation
says is that we need to have an element whose class is equal container. Well that's
our element right there,
it's in white. That's our container class. Then we're going to have another element
inside of that, and that is a row, at least has a class row. Except this time, just
for
demonstration purposes, we're not going to give it a row, we're
going to give it a row-no-negative-margin. Meaning, it's going to be the same row
but
we're not going to give it a negative margin just for
these illustration purposes. And you can see outside of our grid, but
yet still within the container we have some regular content that is basically
right against the edge of the container. And then we're going to place our columns.
Each column, as you can see,
has some padding around it so it can separate itself
from the other columns. So, so far, so good, right? Well, not exactly. Because if
you look as to where the line
of the column content starts and where the line of the regular content
starts, you'll see that they don't match. Now, having consistently
aligned edges of different content structures within your page is
actually a pretty basic design principle. And Bootstrap implements that basic
design
principle for you so you don't trip up. So let's go ahead and
visually now fix this problem. So what we're going to is we're going to
again start with a browser in a container element with some regular content, and
then we're going to add our real
Bootstrap class row element. And what it does is, again,
it stretches itself beyond the container. It negates the container's
padding of actually 15 pixels, to be exact, and
it adds a negative 15 pixel margin. So what that does for our content, in the
columns,
is that it pushes it out, outwards. So what does that do? Well what it does is, is
now that
our column content aligns perfectly with the regular content that
is outside of our grid but is still inside the container wrapper. Now the concept
of aligning the different
edges of content blogs to each other is nothing new and
any good website actually does that. In fact, if you ever look at a website and
something just doesn't feel quite right,
take a look at the aligning. I bet you the aligning of different
blocks of different content elements within the page aren't aligned nicely and your
eye kind of naturally tells
you that something is wrong. Let's take a quick look at the webpage
facebook.com/CourseraWebDev which, by the way, I'm once again encouraging
you to go ahead and like and sign up for the notifications when I
publish some optional free content. But lets take a look at this page. And I just
took one little piece of
that page and, if you take a look, this concept of aligning different blocks
of content is alive and well here. As you can see, the picture,
the text and even the buttons below, very well aligned together and it's very
pleasing to the eye and it's easy to read. The same time Coursera Web Dev and
published by Yaakov Chaikin right is very much aligned as well and
it gives it such structure such that it's pleasing to the eye and there's certainly
plenty of studies about the fact that this is the way that the human
eye actually follows a web page. Okay, so that's what the row class does. Let's
move on to the columns. You've seen this type of
column class definition in our lecture on
the responsive design before. So in terms of how Bootstrap defines it,
let's go ahead and take it apart. So every Bootstrap column class
is defined using this template. It's c o l, col, for
column dash SIZE and then dash SPAN. And let's go over the components of this,
of the two components of this template. First of all the size. Well the size is
screen
width range identifier and it's something like MD for
medium, LG for large, and so on. And you can look up what that means
in the Bootstrap documentation. So, for example,
LG is defined as 1200 pixels and above. So minimum of 1,200 pixels. And what that
means is that
columns will collapse, in other words they'll stack one
upon each other, below that width. So if the screen width is 1,200 pixels and
above for, let's say a large size, it will go ahead and honor whatever
you specify in this column-SIZE-SPAN. But if the screen width is below 1200
pixels this class will no longer apply. And basically what that will
mean is that the columns in your row will collapse on each other, meaning
they will stack one on top of the other. Which basically means that if you had
several columns before, now you'll just have one column because everything is
going to just stack one upon the other. And that is all unless there's
another rule that applies. This is assuming there's
no other rules that apply. So, for example, if for LG, large,
you specified one column span and then for a medium size you specified another
column
span, well when you squeeze the browser and make the browser less wide and
you cross that threshold of 1200 pixels, this, the large column span,
will no longer apply. But if you have specified a md or medium, medium size of the
screen, that
then will kick in, and that will apply. And the span, is really, all it is is how
many columns the element should span. So the values are from 1 to 12. And I've
mentioned many times that
Bootstrap is a 12 column grid layout. And what that means is the second
the columns will adapt to 12, so if you specify let's say, 4, 4,
and 4 then it will load up to 12. If you start specifying more
than 12 columns within the row, well they'll do what other floats do,
is that they will wrap to the next row. But it won't be a row within Bootstrap, it
will just basically
wrap itself automatically. So the point is, if you're specifying
a whole bunch of columns, the element that pushes the total sum of the spans above
12
will automatically wrap to the next line. And this process can keep
going every 12 columns. Lastly, there's nothing really
magical about using DIVs as we did before in the example on the slide. You're free
to use whatever makes
sense to you in your design. In this example we're using the header and
nav elements to define container and row components. In part two of this lecture
we're
going to jump into the editor and try some of these concepts out.