Original subtitles

Now, in the CSS module, you might have realized that one of the biggest annoyances of using CSS is actually

layout.

We've looked at all the ways that you can lay out items, from changing the position, to the display, to

floating, and you would have noticed that it can get very complex very very quickly. And often, all that

you need to do is just lay out things very simply, according to very simple rules.

So let's take a look at the AirBnB web site, and I pulled up the listings for where to stay in Bali.

This has kind of become like my spiritual home.

If you take a look, they have this very very simple format of four listings per row,

right?

And if we go onto a smaller screen size, say on an iPad or an iPhone, it doesn't make sense to have four

items in a row, because they'll get crushed and they become really really tiny,

so you can’t actually see the image or read the text properly.

So what happens is that, if you do go onto this web site, and you start going from the desktop size to

make the jump to the iPad size, you would have noticed that there is a little step just about here where

four items in a row turns into three items in a row.

And this makes each of the listings more visible and more easy to read on the iPad size.

Now there's one other jump when you get to about the smartphone size, which is around here, and this

size only has two listings per row,

again using more of that width and allowing you to be able to view the images more easily.

Now this is very very easily done using Bootstrap.

And this is one of the biggest reasons why people like using Bootstrap. It’s because it makes creating

responsive web sites very very easy.

Now, a lot of people think that responsive means it's fast, or it loads up quickly, but it actually doesn't.

It means that the web site responds to the size of the screen or the viewport.

So that means that it looks slightly different when it's on iPad or when it's on desktop or versus when

it's on mobile.

So let's take a look at how we can implement this super easily using Bootstrap, so that we can use it

for our web site’s layout. And, more specifically,

I want this title, this big title where it says ‘Meet new and interesting dogs nearby’,

plus the two download buttons, to show up on the left side of the screen, taking up roughly half of the

screen.

And then I want this mobile phone image to take up the right 50 percent of the screen. And then when

it goes down to maybe, say, iPhone sized, for everything to be stacked up one on top of each other taking

up 100 percent of the width.

Now let's load up the documentation for this.

So if you go into Documentation, and then Layout, and then we're going to go into Grid to look at the

grid system. And you can see that we can create these columns as easily as by using some divs and specifying

a few Bootstrap classes.

So let's see that in action by launching a new Code Ply.

And I want you to follow along with me just so that you can mess around with the code and really fully

understand what's going on.

So, the first thing I'm going to do is I'm going to change our framework to Bootstrap 4, and at some

point in the future, once a lot of people begin using Bootstrap 4, it will become the default selection,

so you might not have to do this step. But for now there's still a lot of people who haven't learnt this

new framework and the rules for it,

so you might see that the default might be Bootstrap 3. But we are going to sit at the bleeding edge

of technology,

so that is why we’ll always be using the latest version of Bootstrap in our course.

So, the first thing we're going to do is, we're going to create a new div, and we're going to give it a

class of row.

Now, inside this div I'm going to create another div, and this one will have a class of column.

Now I'm also going to add some inline styles, just so that we can see it more clearly when it gets rendered

on screen, and we can differentiate it from other columns or other rows.

So I'm just going to set the background color to red, and then we'll give it a border of 1 pixel solid.

So now let's close off that div, and of course remember that divs don't appear unless they have some

content.

So, we're just going to give it the name of this class, which is the column that we used.

So now, if we hit run, you’ll see that I have this full width column that is taking up the entire

width of the screen.

So I have basically a single row.

Now the interesting thing about this class column is that it will divide up the row to as many sections

as it needs in order to equally distribute all of the columns.

So that means that, if I have two divs that are both class equals column, then they will both only take

up 50 percent of the screen.

And equally, if I add a third one, then each of these column divs will take up a third of that row width.

Now what if I wanted a column that only took up half of the width of the screen?

So, you might think that, OK, the way to do this is to delete that third div so that we have two column

divs resting side by side in the same row.

Well, you might think that,

OK, you could probably use some CSS and, you know, make this div appear white or not there.

Well, there's actually a much much easier way using Bootstrap.

So, let's create a new row, just so that we can keep a reference to this and we can see it on screen.

So again, we're going to create a new div with the class ‘row’, and inside here I'm going to create a div

that has a class called col-6.

And again I'm going to basically add the same style, so background color,

and this one I'm going to make green,

and then again border, one pixel solid, and I'm going to close off that div. And inside here I'm going

to call this col-6, so that we can see it when we run it.

Now, you’ll notice that in this case, my column only takes up 50 percent of the width of the screen without

the need for anything else on the right. And the cool thing about this is that you can use a number to

specify how much of the row do you want to take up. And the total for a single row is 12.

So that means that if you add a div that has a number, say col-3, then it will only take up a

quarter of the screen.

So, remember, 12 divided by 3 equals 4, right? So col-3 only takes up 3 units inside 12

units,

so therefore it's only a quarter of the screen. And you can repeat this code so that you actually fill

up the row.

So, for example, you could have a col-2,

so that's a sixth of the row,

and then you could have something like a col-1, right, go all the way down to the smallest unit,

which means this is a twelfth of the row.

And now with the 6 plus 3 plus 2 plus 1, we get 12.

And so now we fill up the entire width of the row.

Now, that's all very well and good, but the only problem with this is that, as you change the size of the

viewport,

say if we go down to a tablet size or a mobile size, none of these columns change in width.

So what if we want something similar to what AirBnB has? You know, where we can say that maybe on

the desktop size we would want four columns, right, taking up equal width, but maybe on iPad we only want

three columns and on iPhone we only want two columns.

So how can we do that?

So let's go ahead and add another row where we add a responsive column.

So I'm going to create a div that is going to have a class of row.

So all of these columns use the div class row. And then I'm going to add a div that has a different class

and this class is going to be col-md-6.

And then I'm just going to paste in our style over here.

And I'm going to change the color to blue just so that we can see the difference. And we're going to

close off that div, and I'm going to call this col-md-6.

And now, if we run our code, you can see that, similar to the col-6,

this col-md-6 also takes up 6 units, so half of the screen.

But, say if I add another div, you can see that we've got two columns inside our row currently, the blue

ones,

but, if I switch to a smartphone size, you can see that they each now take up 100 percent of the width

of the screen.

But on tablet they still take up half of the width.

So what this col-md-6 means is that we should have a 6 unit column on any size from medium

size or tablet size upwards.

So that means tablet, laptop, large desktop, they all will take up six units, but anything smaller than the medium

size, namely on mobile,

they will take up the full width.

So let's delete these two divs in the non-responsive sort of section, and let's change this to a

col-6,

so we now basically have two 6 column divs.

Now let's change this blue, actually, to a yellow, because I think it’ll make the text a little bit more

visible, so that you can see it slightly easier.

Now, you can see that we've got essentially the same thing in three rows, right?

These two are two columns that are taking up 50 percent of the width each, because the entire row has to take

up 100 percent.

Now the second one, each column is only taking up 6 units, but it's non-responsive.

And the third one, each column is only taking up 6 units, as long as it's tablet sized or larger.

So let's switch to the laptop size.

You can see there's no difference.

But now let's switch to the smartphone size, and you can see that the third type of columns actually

are responsive.

So you can use this code and play around with it to see the difference by specifying that medium keyword

and not doing so.

Now what if you wanted to be more specific than that?

What if you wanted to recreate the AirBnB experience,

so you have four items per row, or four columns rather, on desktop, but then on tablet to only have three,

and then on mobile to only have two?

How would you do that using Bootstrap?

Well, let's modify our third row so that we have something that works in a similar way.

So the first thing is that we need four divs to play around with.

So I'm going to add another two divs to the bottom, and now we have four divs that are in this responsive

kind of mode.

Let's start from the simplest, which is I want there to be four columns on desktop, so 12 divided by

4 is 3,

so we need a 3 unit column. And we can specify this by changing the keyword to large.

So now we have col-lg-3.

And if you run that you can see that we've got a 3 unit column on desktop.

So let's go ahead and change all of the other divs to this kind of format.

So, if we run now, you'll see that we have four columns, each taking up three units on desktop, but anything

smaller than desktop, they will take up 100 percent of the width.

So on tablet and on mobile they will take up 100 percent.

So that's not quite what we want,

because on tablet we want it to take up a third of the row.

So 12 divided by 3 is 4.

So let's add another rule in here where we say on the medium sized screens and above, we want to have

a 4 unit column.

So now let's again replace all of these other divs with this new format.

And, if we run our code, you'll see that, on the tablet size, each of these columns now take up four units

when we're on the tablet or the medium size, and on desktop it goes to that col-lg-3 rule

and becomes a three unit column,

and similarly on the large desktop it's also the same.

Now what about mobile?

Well it's still taking up 100 percent of the width, unless we specify another class.

So, on the smaller size screen, we want each column to take up only 50 percent of the width, so that we

end up with two columns per row. So two columns per row means 12 divided by 2.

So that's a six unit column.

So let's add this to our text and let's delete these three other divs so that we can make a copy of

this first one

and paste it in.

So we now have four divs which take up a quarter of the width

when we're on the desktop size or larger, but only a third of the width when we're on tablet, and only

half of the width when we're on mobile.

So you can see that when we're on tablet, because we can't fit all four of these on the same row, it

actually pushes it to the next row automatically.

Now there's a lot of new ideas in this lesson,

and in order to really fully understand this concept, you will need to have a play around with the code

yourself.

So, as a challenge, I want you to create another set of responsive columns, but this one is going to have

slightly different rules from the previous row.

So, if you already followed along with the code, you should have your own version of this Code Ply.

Now, if you haven't, I'm going to include a link in the resources for this section, so that you can open up the

Code Ply, and you can copy the code in my HTML section, and paste it to your own Code Ply.

Now, what I want you to do is to create another row below these three, and you can give it a different

color.

Now, it doesn't matter what you choose, as long as you can see the difference from the previous rows.

Now, for this particular set of columns, I want you to make it responsive.

So on the larger sizes,

so desktop and also on laptop, you should have six columns per row.

Now, on tablet you should only have four columns per row, and on mobile they should each take up 100 percent

of the width.

So, pause the video now and see if you can complete this challenge.

All right.

So how did that go?

Well, in order to complete the challenge, you really need to understand how the grid system works.

And, if you get stuck, always remember that there's always the documentation to go back to.

Now, once you've read that and it all makes sense, then we can get started.

So, we're going to create another div, of course, and this will be the row which is going to contain our

columns, and inside this row we're going to create a new column.

Now here we have to think carefully. What we want is that, on the larger sizes,

so on the laptop and desktop, we want there to be a two unit column, because it's going to take up a sixth

of the width.

So that's going to be col-lg-2.

Now, the other thing we want to happen is that, on the medium sizes, on the tablet size and above, we want

to have a three unit column, so that's col-md-3, because 12 divided by 3 is 4,

so that's four columns per row, which is what we wanted.

Now, for the smaller size, you can either say col-sm-12 for the columns to take up the full

100 percent of the width, or you can actually leave that out because by default all of the columns

should take up 100 percent of the width.

So, now that we've got our classes, let's add in our style so that we can see it and make it more visible.

So, in this case I'm going to change my background color to grey.

Now it doesn't really matter what you choose.

And then I'm going to add the text here into my div, so that my div actually shows up, because it has

some content rather than just style.

So now let's hit run.

And we've now got this column that takes up a sixth of the width.

Now, in order to make that a little bit more visible, I'm going to copy this and paste in another five copies,

and we can count that there's now six columns in our row on the laptop and on the desktop sizes.

Now, the next step to check is what happens on tablet. And you can see the rule of col-md-3

means that we have three unit columns, so 12 divide by 3 is 4 columns per row on the tablet

size, and on the mobile size we have 100 percent of the width, because we've only specified that anything

above medium should be 3 units, and anything below automatically becomes 100 percent.

So, if you didn't manage to get it, create it now, and see if it makes sense.

And also just mess around with the layout, you know, try to make a row that has, maybe, 12 items on large

sizes, or, maybe, only six items on the smaller mobile screen.

But basically, the key to understanding this is trying to get the code to do what you want it to,

and that way you'll understand how all of these classes work.

And if you get confused, there's always the grid system documentation to fall back on.