Now, in the CSS module, you might have realized that one of the biggest annoyances of using CSS is actually 1
layout. 2
We've looked at all the ways that you can lay out items, from changing the position, to the display, to 3
floating, and you would have noticed that it can get very complex very very quickly. And often, all that 4
you need to do is just lay out things very simply, according to very simple rules. 5
So let's take a look at the AirBnB web site, and I pulled up the listings for where to stay in Bali. 6
This has kind of become like my spiritual home. 7
If you take a look, they have this very very simple format of four listings per row, 8
right? 9
And if we go onto a smaller screen size, say on an iPad or an iPhone, it doesn't make sense to have four 10
items in a row, because they'll get crushed and they become really really tiny, 11
so you can’t actually see the image or read the text properly. 12
So what happens is that, if you do go onto this web site, and you start going from the desktop size to 13
make the jump to the iPad size, you would have noticed that there is a little step just about here where 14
four items in a row turns into three items in a row. 15
And this makes each of the listings more visible and more easy to read on the iPad size. 16
Now there's one other jump when you get to about the smartphone size, which is around here, and this 17
size only has two listings per row, 18
again using more of that width and allowing you to be able to view the images more easily. 19
Now this is very very easily done using Bootstrap. 20
And this is one of the biggest reasons why people like using Bootstrap. It’s because it makes creating 21
responsive web sites very very easy. 22
Now, a lot of people think that responsive means it's fast, or it loads up quickly, but it actually doesn't. 23
It means that the web site responds to the size of the screen or the viewport. 24
So that means that it looks slightly different when it's on iPad or when it's on desktop or versus when 25
it's on mobile. 26
So let's take a look at how we can implement this super easily using Bootstrap, so that we can use it 27
for our web site’s layout. And, more specifically, 28
I want this title, this big title where it says ‘Meet new and interesting dogs nearby’, 29
plus the two download buttons, to show up on the left side of the screen, taking up roughly half of the 30
screen. 31
And then I want this mobile phone image to take up the right 50 percent of the screen. And then when 32
it goes down to maybe, say, iPhone sized, for everything to be stacked up one on top of each other taking 33
up 100 percent of the width. 34
Now let's load up the documentation for this. 35
So if you go into Documentation, and then Layout, and then we're going to go into Grid to look at the 36
grid system. And you can see that we can create these columns as easily as by using some divs and specifying 37
a few Bootstrap classes. 38
So let's see that in action by launching a new Code Ply. 39
And I want you to follow along with me just so that you can mess around with the code and really fully 40
understand what's going on. 41
So, the first thing I'm going to do is I'm going to change our framework to Bootstrap 4, and at some 42
point in the future, once a lot of people begin using Bootstrap 4, it will become the default selection, 43
so you might not have to do this step. But for now there's still a lot of people who haven't learnt this 44
new framework and the rules for it, 45
so you might see that the default might be Bootstrap 3. But we are going to sit at the bleeding edge 46
of technology, 47
so that is why we’ll always be using the latest version of Bootstrap in our course. 48
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 49
class of row. 50
Now, inside this div I'm going to create another div, and this one will have a class of column. 51
Now I'm also going to add some inline styles, just so that we can see it more clearly when it gets rendered 52
on screen, and we can differentiate it from other columns or other rows. 53
So I'm just going to set the background color to red, and then we'll give it a border of 1 pixel solid. 54
So now let's close off that div, and of course remember that divs don't appear unless they have some 55
content. 56
So, we're just going to give it the name of this class, which is the column that we used. 57
So now, if we hit run, you’ll see that I have this full width column that is taking up the entire 58
width of the screen. 59
So I have basically a single row. 60
Now the interesting thing about this class column is that it will divide up the row to as many sections 61
as it needs in order to equally distribute all of the columns. 62
So that means that, if I have two divs that are both class equals column, then they will both only take 63
up 50 percent of the screen. 64
And equally, if I add a third one, then each of these column divs will take up a third of that row width. 65
Now what if I wanted a column that only took up half of the width of the screen? 66
So, you might think that, OK, the way to do this is to delete that third div so that we have two column 67
divs resting side by side in the same row. 68
Well, you might think that, 69
OK, you could probably use some CSS and, you know, make this div appear white or not there. 70
Well, there's actually a much much easier way using Bootstrap. 71
So, let's create a new row, just so that we can keep a reference to this and we can see it on screen. 72
So again, we're going to create a new div with the class ‘row’, and inside here I'm going to create a div 73
that has a class called col-6. 74
And again I'm going to basically add the same style, so background color, 75
and this one I'm going to make green, 76
and then again border, one pixel solid, and I'm going to close off that div. And inside here I'm going 77
to call this col-6, so that we can see it when we run it. 78
Now, you’ll notice that in this case, my column only takes up 50 percent of the width of the screen without 79
the need for anything else on the right. And the cool thing about this is that you can use a number to 80
specify how much of the row do you want to take up. And the total for a single row is 12. 81
So that means that if you add a div that has a number, say col-3, then it will only take up a 82
quarter of the screen. 83
So, remember, 12 divided by 3 equals 4, right? So col-3 only takes up 3 units inside 12 84
units, 85
so therefore it's only a quarter of the screen. And you can repeat this code so that you actually fill 86
up the row. 87
So, for example, you could have a col-2, 88
so that's a sixth of the row, 89
and then you could have something like a col-1, right, go all the way down to the smallest unit, 90
which means this is a twelfth of the row. 91
And now with the 6 plus 3 plus 2 plus 1, we get 12. 92
And so now we fill up the entire width of the row. 93
Now, that's all very well and good, but the only problem with this is that, as you change the size of the 94
viewport, 95
say if we go down to a tablet size or a mobile size, none of these columns change in width. 96
So what if we want something similar to what AirBnB has? You know, where we can say that maybe on 97
the desktop size we would want four columns, right, taking up equal width, but maybe on iPad we only want 98
three columns and on iPhone we only want two columns. 99
So how can we do that? 100
So let's go ahead and add another row where we add a responsive column. 101
So I'm going to create a div that is going to have a class of row. 102
So all of these columns use the div class row. And then I'm going to add a div that has a different class 103
and this class is going to be col-md-6. 104
And then I'm just going to paste in our style over here. 105
And I'm going to change the color to blue just so that we can see the difference. And we're going to 106
close off that div, and I'm going to call this col-md-6. 107
And now, if we run our code, you can see that, similar to the col-6, 108
this col-md-6 also takes up 6 units, so half of the screen. 109
But, say if I add another div, you can see that we've got two columns inside our row currently, the blue 110
ones, 111
but, if I switch to a smartphone size, you can see that they each now take up 100 percent of the width 112
of the screen. 113
But on tablet they still take up half of the width. 114
So what this col-md-6 means is that we should have a 6 unit column on any size from medium 115
size or tablet size upwards. 116
So that means tablet, laptop, large desktop, they all will take up six units, but anything smaller than the medium 117
size, namely on mobile, 118
they will take up the full width. 119
So let's delete these two divs in the non-responsive sort of section, and let's change this to a 120
col-6, 121
so we now basically have two 6 column divs. 122
Now let's change this blue, actually, to a yellow, because I think it’ll make the text a little bit more 123
visible, so that you can see it slightly easier. 124
Now, you can see that we've got essentially the same thing in three rows, right? 125
These two are two columns that are taking up 50 percent of the width each, because the entire row has to take 126
up 100 percent. 127
Now the second one, each column is only taking up 6 units, but it's non-responsive. 128
And the third one, each column is only taking up 6 units, as long as it's tablet sized or larger. 129
So let's switch to the laptop size. 130
You can see there's no difference. 131
But now let's switch to the smartphone size, and you can see that the third type of columns actually 132
are responsive. 133
So you can use this code and play around with it to see the difference by specifying that medium keyword 134
and not doing so. 135
Now what if you wanted to be more specific than that? 136
What if you wanted to recreate the AirBnB experience, 137
so you have four items per row, or four columns rather, on desktop, but then on tablet to only have three, 138
and then on mobile to only have two? 139
How would you do that using Bootstrap? 140
Well, let's modify our third row so that we have something that works in a similar way. 141
So the first thing is that we need four divs to play around with. 142
So I'm going to add another two divs to the bottom, and now we have four divs that are in this responsive 143
kind of mode. 144
Let's start from the simplest, which is I want there to be four columns on desktop, so 12 divided by 145
4 is 3, 146
so we need a 3 unit column. And we can specify this by changing the keyword to large. 147
So now we have col-lg-3. 148
And if you run that you can see that we've got a 3 unit column on desktop. 149
So let's go ahead and change all of the other divs to this kind of format. 150
So, if we run now, you'll see that we have four columns, each taking up three units on desktop, but anything 151
smaller than desktop, they will take up 100 percent of the width. 152
So on tablet and on mobile they will take up 100 percent. 153
So that's not quite what we want, 154
because on tablet we want it to take up a third of the row. 155
So 12 divided by 3 is 4. 156
So let's add another rule in here where we say on the medium sized screens and above, we want to have 157
a 4 unit column. 158
So now let's again replace all of these other divs with this new format. 159
And, if we run our code, you'll see that, on the tablet size, each of these columns now take up four units 160
when we're on the tablet or the medium size, and on desktop it goes to that col-lg-3 rule 161
and becomes a three unit column, 162
and similarly on the large desktop it's also the same. 163
Now what about mobile? 164
Well it's still taking up 100 percent of the width, unless we specify another class. 165
So, on the smaller size screen, we want each column to take up only 50 percent of the width, so that we 166
end up with two columns per row. So two columns per row means 12 divided by 2. 167
So that's a six unit column. 168
So let's add this to our text and let's delete these three other divs so that we can make a copy of 169
this first one 170
and paste it in. 171
So we now have four divs which take up a quarter of the width 172
when we're on the desktop size or larger, but only a third of the width when we're on tablet, and only 173
half of the width when we're on mobile. 174
So you can see that when we're on tablet, because we can't fit all four of these on the same row, it 175
actually pushes it to the next row automatically. 176
Now there's a lot of new ideas in this lesson, 177
and in order to really fully understand this concept, you will need to have a play around with the code 178
yourself. 179
So, as a challenge, I want you to create another set of responsive columns, but this one is going to have 180
slightly different rules from the previous row. 181
So, if you already followed along with the code, you should have your own version of this Code Ply. 182
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 183
Code Ply, and you can copy the code in my HTML section, and paste it to your own Code Ply. 184
Now, what I want you to do is to create another row below these three, and you can give it a different 185
color. 186
Now, it doesn't matter what you choose, as long as you can see the difference from the previous rows. 187
Now, for this particular set of columns, I want you to make it responsive. 188
So on the larger sizes, 189
so desktop and also on laptop, you should have six columns per row. 190
Now, on tablet you should only have four columns per row, and on mobile they should each take up 100 percent 191
of the width. 192
So, pause the video now and see if you can complete this challenge. 193
All right. 194
So how did that go? 195
Well, in order to complete the challenge, you really need to understand how the grid system works. 196
And, if you get stuck, always remember that there's always the documentation to go back to. 197
Now, once you've read that and it all makes sense, then we can get started. 198
So, we're going to create another div, of course, and this will be the row which is going to contain our 199
columns, and inside this row we're going to create a new column. 200
Now here we have to think carefully. What we want is that, on the larger sizes, 201
so on the laptop and desktop, we want there to be a two unit column, because it's going to take up a sixth 202
of the width. 203
So that's going to be col-lg-2. 204
Now, the other thing we want to happen is that, on the medium sizes, on the tablet size and above, we want 205
to have a three unit column, so that's col-md-3, because 12 divided by 3 is 4, 206
so that's four columns per row, which is what we wanted. 207
Now, for the smaller size, you can either say col-sm-12 for the columns to take up the full 208
100 percent of the width, or you can actually leave that out because by default all of the columns 209
should take up 100 percent of the width. 210
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. 211
So, in this case I'm going to change my background color to grey. 212
Now it doesn't really matter what you choose. 213
And then I'm going to add the text here into my div, so that my div actually shows up, because it has 214
some content rather than just style. 215
So now let's hit run. 216
And we've now got this column that takes up a sixth of the width. 217
Now, in order to make that a little bit more visible, I'm going to copy this and paste in another five copies, 218
and we can count that there's now six columns in our row on the laptop and on the desktop sizes. 219
Now, the next step to check is what happens on tablet. And you can see the rule of col-md-3 220
means that we have three unit columns, so 12 divide by 3 is 4 columns per row on the tablet 221
size, and on the mobile size we have 100 percent of the width, because we've only specified that anything 222
above medium should be 3 units, and anything below automatically becomes 100 percent. 223
So, if you didn't manage to get it, create it now, and see if it makes sense. 224
And also just mess around with the layout, you know, try to make a row that has, maybe, 12 items on large 225
sizes, or, maybe, only six items on the smaller mobile screen. 226
But basically, the key to understanding this is trying to get the code to do what you want it to, 227
and that way you'll understand how all of these classes work. 228
And if you get confused, there's always the grid system documentation to fall back on.