Instructor: All right, so now that we've had
a little bit of a taste of what Bootstrap can do,
let's dive deep
into one of the most powerful features of Bootstrap
which is the 12 column layout system.
The 12 column system is made of three components.
Firstly, we need a div that has a class of container
and this is going to be the starting point.
Next, inside that container, we need another div
which is going to be of class row,
and inside the row is where we will have our items
and they will be laid out using the column system.
So what does this look like in code?
Well, it's pretty simple.
We have a container that contains a single row,
and then within the row,
we can have as many items as we like
and they're laid out using the column class.
Pretty simple so far, and you are probably thinking,
well, there's nothing very groundbreaking here.
Now the interesting thing starts happening
when you have multiple columns laid out inside these rows
because automatically, Bootstrap will try to give
every column inside the row equal spacing
and space them across the entire width of the container.
So if you had a container which included a row
that had one, two, three, four,
five, six divs in there
each with the class set as col, short for column,
then it will divide up the entire width by six.
And if you had three of them,
then it would give each of them a third of the space.
Now the Bootstrap container is responsive,
so by defining a div with the class of container,
you are actually telling it to have a different size
on different sized screens.
If we had an XL or an XXL screen,
so like a desktop or a TV or something,
then that container is going to be this size
and you can see that there's several breakpoints
that are responsive to the different device screen sizes.
On mobile, maybe the container would be 540 pixels.
On an iPad, maybe it would be 720 or 960 pixels,
and on desktop maybe it would be about 1,000 pixels.
You can use the dash plus these different letters
to specify at which point you want your container
to be a hundred percent.
container-sm is the same as the normal container,
but container-md or medium means that on small screens,
the container would already reach a hundred percent
of the width of the screen.
And again, remember all of these sizes here
are referring to the width of the viewport,
so only this dimension.
And then as we go down the line,
we're starting to specify a hundred percent width
on larger and larger screens
until we reach this container-fluid
which basically says that on all screen sizes,
we want it to reach from edge to edge,
which is a hundred percent width.
In most cases,
you will see these two being used quite frequently
because the container gives a nice sort of margin
around the left and the right
and the container-fluid
is when you want that edge-to-edge behavior.
The layout system gets more interesting
when we start using sized columns.
Instead of just writing col as the class,
we can actually set the class as, for example,
col-2 or col-4.
And what this is saying is if we think of each of our rows
as having 12 columns,
and we split them all up
into the 12 equal size columns, like this.
So if you count, this is actually total of 12,
then when we create a div, we can specify,
well, how many of these columns do we want to occupy?
In this case, this div wants two of those columns
and then this one wants four of them
and then the final one wants six.
Based on the classes that you choose,
Bootstrap will know how much space to allocate each div
on a percentage basis.
So you could view the col-6 as a 50%
and the col-2 as 1/6 of the entire width
and so on and so forth.
So you can use all of the numbers,
col-1 all the way up to col-12,
and you can split up the proportion of your screen
and the content inside.
So maybe you would have a navigation section on the left
that you only want to take up 2 out of 12 width,
and then the main content here
maybe could take up 10 out of 12 of the width
and so on and so forth.
And this is a really, really easy
and intuitive way of sizing your content using Bootstrap.
And this is what the code would look like.
So we have three divs
and we're giving this one 2 out of 12,
4 out 12, 6 out of 12.
And this is the layout that we end up with.
And we didn't have to write any CSS.
All we had to do was add in the prebuilt layout classes.
Again, it's really important to know that Bootstrap
has predefined breakpoints
and these dimensions are defined
based on common screen sizes.
And even though these numbers are constantly changing,
generally, I would say that small is for mobile devices,
medium is for tablets and iPads,
large is for laptop,
extra large is for desktop,
and extra, extra large is for anything crazy
like maybe a TV or something.
And extra small is for devices
that are maybe longer than they are wide,
so maybe foldable phones
and even really narrow phone screens.
Now, one thing I want to draw your attention to
is the directionality of the signs here.
All of these breakpoints,
which we'll often use, for example, col-sm-2,
this section refers to the screens
which are greater than this dimension.
So that means the small breakpoint
is between here and here,
and covers the range between 576 and 768
and each of them always go up.
So this is an important point to keep in mind
when you're dealing with the Bootstrap breakpoints.
Now, one of the great things about Bootstrap breakpoints
is we don't really need the media queries as much
because this covers pretty much a lot
of the different device dimensions
and we don't have to manually write all the pixel sizes
and add media queries into our CSS.
We can target the different sizes
and make our website responsive
by using the prebuilt breakpoints.
Here's an example of the Bootstrap breakpoints.
Here we're saying that on a small screen and above,
we want the dimension ratio to be two, four, and six.
So this means that on desktop, on laptop, on TV,
it's all going to have this size and even on mobile as well.
But below the size of mobile,
it is not defined as having these proportions.
So it will default to giving each of these divs 100%.
And similarly, if you don't add a number here,
so we could for example here, it's 12 columns,
12 divided by 3.
So these are actually col-sm-4.
But if we don't define a number,
you remember that they will automatically distribute.
But what would it look like
if we reduce the screen size to less than a mobile size?
Well, all of these divs will go to 100% width.
When the overall width is less than 576,
then all of these items default to
as if they just had column defined.
So col as the class, and the col class by default
is going to take up 100% of the width
in the small size screen.
Now, in a single div,
you can actually also have multiple breakpoints.
So in this case, what it's saying
is on the large devices and above,
then it should take up 4 out of 12 of the width,
on medium sizes and above,
well, because the above is already defined,
so then this case is only on medium devices,
then it should take up 8 out of 12 of the width.
And on small devices, it should take up 12 out of 12.
So full width.
Here, we're simulating a large screen
so maybe on a laptop or a desktop,
then it's taking up 4 out of 12,
it's this kind of proportion.
And then we go over to the next size down,
say on an iPad, then it's going to take up 8 out of 12
of the screen.
And just for example sakes, let's go down even further
to a mobile size where we want it to take up 100%
or full width of the screen.
Because as you imagine,
when we have more screen real estate,
it's easier to see things.
And when we're working on smaller screens,
we want to make things generally a bit larger
so that it's easier for users to see our content.
In addition to having multiple breakpoints in each div,
you can also mix and match the types of definition.
So for example, here we've got two size columns,
col-2 and col-4.
So it's always going to take up 2 out of 12, this section,
4 out of 12 here.
But this last one,
notice how we've just left it as the column class.
Now this means
that it's going to automatically adjust in size
in order to take up whatever proportion remains.
Bootstrap layout is a little bit complicated
when you're first working with it
and it's really important that you read the docs
and also have plenty of practice
before things start to make more sense.
So in order for you to practice, I've created a website
at appbrewery.github.io/bootstrap-layout.
And if you go to this website,
you'll see that I've got three exercises in total for you.
The idea of the exercises is that at the top,
there will be a demo area
which is the effect that you're trying to achieve.
For example, in this case, we want these divs
to be 50% on desktop and 100% on mobile.
So as I reduce the width,
you'll see that it gets to a point
where we reach that sm breakpoint
where it goes into 100% width.
As you scroll down, each of the different exercises
will have different proportions.
And what you want to do
is to modify the HTML code inside here,
which is responsible for the styling
of the area that you control
which are the divs underneath the examples.
And I want you to add the classes
using the 12 column layout system
so that your area behaves exactly the same as the top area
when you reduce the size
and hit the various different breakpoints.
If you get stuck, be sure to check out the layout section
of the Bootstrap documentation.
And here you'll see the different Bootstrap breakpoints.
Also, you can read up more on how the columns work,
how the containers work, and how the grid system works.
Pause the video now and give this challenge a go.
So hopefully, you've given this a go
and you manage to get everything to work correctly.
Let's go through the solution together.
The first example says it should be 50% on desktop
and 100% on mobile.
We know that the desktop breakpoint is the xl,
so we can define column-xl-6,
and 6 out of 12 is of course 50%.
Now, in order to get it to be 100% on mobile,
we could say col-sm-12, which is 100%,
and we can add that to both divs.
Now if I go ahead and set apply changes,
you can see now when I reduce the width of the window,
that it's going to hit that breakpoint
where below which it's no longer going to be 50%
and it's going to start taking up the full width.
Now you might remember from previously
we said that the Bootstrap breakpoints
target sizes this particular size and above.
So when we define column-xl-6,
we're saying anything that's above the xl breakpoint,
which is greater than 1,200 pixels, should be 50%.
You might have realized
that you don't actually need to define this
because everything else is going to default to 100%.
So if I apply changes, again,
you can see that my purple example still behaves the same
as the green example, and I've only changed the behavior
of the xl size and above and changed its layout.
All right, so let's go to exercise number two.
And in this case, I haven't given you here exactly
what they should do or how they should behave.
And instead, I wanted you to simply just reduce
the width of the screen to see how it changes
through the different sizes.
The first one's easy.
Pretty much all of the larger sizes,
all the way down to the large breakpoint,
takes up the full 12 width column.
And you can take out a ruler
if you want to measure the screen,
but we can see that column 1
is roughly half of the width of the row.
Column 2 and 3 are pretty much equal size
so it's probably going to be six, three, and three.
Let's modify this
so that we target the large breakpoint first.
So we'll say col-lg-6
for the first column.
The second column is going to be col-lg-3,
and the same for the third column.
So now if I click Apply Changes,
you can see it's now taking up the same proportions,
but when we hit this breakpoint
that's below the large breakpoint,
our columns, by default, go to 100%
whereas the example actually does something different.
The top column takes up 100%
and the other two take up half of the width.
And you can see that behavior continues
all the way until the very small size.
So that means that we've got an sm breakpoint there defined.
Now once you work with this for a long time,
you can spot each of the breakpoints pretty much by eye.
But initially, you can always just switch around,
try different ones, try the sm, try the xl,
and see which ones actually behave like the example.
There's nothing wrong with trial and error.
When it hits the smaller screen size,
our column 1 is going to take up the full width of the row
and then the other two on the smaller breakpoint
are going to take up half of the width.
So col-sm-6.
And similarly, the third one does the same thing.
So let's apply the change.
And you can see now at this breakpoint,
they also behave exactly the same.
So now all we have left is the final one
which is just the smallest breakpoint for the columns.
And here, what's actually happening
is each of these columns are taking up 10 out of 12
of the columns.
Now I can spot that by eye
but also I created this exercise so I know.
But if you try some different numbers,
you'll probably get there as well.
So if we define the smallest size as column,
let's just try an 8 to start with
so I can show you this trial and error process.
And we know that all the columns behave the same
at that breakpoint.
If we click Apply Changes and we go here,
we can see, well, 8 is clearly too small
so let's go up a size and let's change to 10 out of 12.
And once I hit Apply Changes,
you can see we now have both sets of columns
behaving exactly the same at all the different breakpoints.
This one was a little bit harder admittedly
and it required a little bit more thinking
and probably trial and error on your part,
but hopefully, by the end of it,
you would understand a bit better
about how these different breakpoints work
and at which points they hit.
So now for the final exercise,
and this one we've got two columns.
Initially, they start out in one line
taking up a particular proportion,
and then we hit a certain breakpoint
and it changes the proportion.
Column 1 gets a little bit wider,
takes up more space compared to column 2.
And then if we reduce a little bit more,
that changes again at the next breakpoint.
And then again, and then finally, taking up full width.
So let's start with the largest breakpoint we know,
which is the xxl.
Let's say that col-xxl
and let's define it as 1 out of 12
and then give the other half, 12 minus 1 is 11,
and now let's apply the change.
And you can see that is the correct proportion.
Again, this might require trial and error on your part.
Don't be too hard on yourself
if you didn't manage to get it first time.
I wouldn't be able to either
if it was somebody else's exercise like this.
Now let's hit the next breakpoint just about here,
and this is going to be the next breakpoint down,
this is the xl.
We've just hit 1,200.
And a tip for working with responsiveness.
When you're wondering, how do I know
that it's the 1,200 pixel breakpoint that got hit?
If you go into the Chrome developer tools
and click on this button to toggle the device toolbar
and change the dimensions to responsive,
then you can click this drag bar and look at the top here.
This is the important width that we need to look at.
Once I expand it to 1,200,
you can see that jump in size happen just around there.
So we know that the 1,200 breakpoint is the xl breakpoint,
and you can work this out this way as well.
So just a tip for the future
when you're working with any kind of responsiveness.
This is really useful to know.
But most of the time, I would judge responsiveness
just by eye when you're designing the layout
to see what looks good.
All right, so let's hit the next breakpoint
at the xl size 1,200 pixels.
So this is col-xl
and I reckon this is a ratio of 2 to 10.
So let's do col-xl-2, col-xl-10.
Let's apply our changes.
And that's pretty good.
So now let's keep reducing until we hit the next breakpoint.
And this is going to be the next level down
which is large, lg,
and I reckon this is probably 4 to 8.
So col-lg-4
and the next one will be col-lg-8.
And notice that each of these always add up to 12
because you can see in the example layout,
they're only taking up one row.
If it didn't add up to 12, then it will go to the next row
in order to take up the amount of space that we specified.
Now we have the next breakpoint, which is the col-md.
And this one's easy to spot because it's half-half
so it's going to be six.
And finally, we have the rest by default
going to take up 100%.
So you could define the sm,
but that's also the default behavior.
So you could also leave it out.
There you have it.
That's the final solution code
for exercise three and exercise two
and exercise one.
Hopefully, you managed to get there in the end
even if there was a little bit of trial and error
and some difficulty.
But once you've used Bootstrap layout a few times,
you'll get used to this idea.
And it's a really intuitive way to layout our screen
and it's really easy to manipulate
and to create different layout designs.
Now in the next lesson, we're going to be talking
through the different Bootstrap components.
So for all of that and more, I'll see you there.