Original subtitles

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 (col).

Pretty simple so far

and you're 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're 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 540px, on an iPad, maybe it would be 720 or 960px,

and on desktop, maybe it would be about 1000Px.

You can use the dash (-) plus these different letters to specify at which point you want your container

to be

100%.

Container "sm" is the same as the normal container, but container "md" or medium means that on small screens

the container would already reach 100% 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 100% 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 100% 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 a 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 50%, and the col-2 as one-sixth 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 of 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 pre-built 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.

A 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 will 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 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 pre-built 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/3,

so these are actually col-sm-4's.

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 (

then all of these items default to as if they just had a 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-sized 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 four 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 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.

So 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 definitions.

So for example, here we've got two-sized columns, col-2 and col-4.

So it's always going to take up 2 out of 12, this section four 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 for 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've managed 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 col-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 col-xl-6, we're saying anything that's above the XL breakpoint, which is greater

than 1200px, 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 2.

And in this case, I haven't given you 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,

Columns 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 called ld-3Dash, 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've worked 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 ten 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, eight 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 will 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 as 1 out of 12, and then give the other half,

12 minus one 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.

T his is the xl.

We've just hit 1200. And a tip for working with responsiveness,

when you're wondering how do I know that it's the 1200px 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 1200, you can see that jump

in size happen just around there.

So we know that the 1200 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 1200px.

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 6,

And finally we have the rest are 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 3 and Exercise 2 and Exercise 1.

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.