WEBVTT 0 00:00.880 --> 00:08.770 Now, in the CSS module, you might have realized that one of the biggest annoyances of using CSS is actually 1 00:08.800 --> 00:10.050 layout. 2 00:10.240 --> 00:17.100 We've looked at all the ways that you can lay out items, from changing the position, to the display, to 3 00:17.110 --> 00:25.210 floating, and you would have noticed that it can get very complex very very quickly. And often, all that 4 00:25.210 --> 00:31.230 you need to do is just lay out things very simply, according to very simple rules. 5 00:31.240 --> 00:38.560 So let's take a look at the AirBnB web site, and I pulled up the listings for where to stay in Bali. 6 00:38.560 --> 00:40.590 This has kind of become like my spiritual home. 7 00:40.600 --> 00:47.940 If you take a look, they have this very very simple format of four listings per row, 8 00:47.980 --> 00:48.570 right? 9 00:48.910 --> 00:56.290 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 00:56.290 --> 01:00.710 items in a row, because they'll get crushed and they become really really tiny, 11 01:00.820 --> 01:04.260 so you can’t actually see the image or read the text properly. 12 01:04.510 --> 01:13.240 So what happens is that, if you do go onto this web site, and you start going from the desktop size to 13 01:13.300 --> 01:20.410 make the jump to the iPad size, you would have noticed that there is a little step just about here where 14 01:20.470 --> 01:24.850 four items in a row turns into three items in a row. 15 01:25.120 --> 01:32.620 And this makes each of the listings more visible and more easy to read on the iPad size. 16 01:32.620 --> 01:39.670 Now there's one other jump when you get to about the smartphone size, which is around here, and this 17 01:39.670 --> 01:42.780 size only has two listings per row, 18 01:42.810 --> 01:49.050 again using more of that width and allowing you to be able to view the images more easily. 19 01:49.050 --> 01:53.850 Now this is very very easily done using Bootstrap. 20 01:54.130 --> 02:00.550 And this is one of the biggest reasons why people like using Bootstrap. It’s because it makes creating 21 02:00.550 --> 02:04.240 responsive web sites very very easy. 22 02:04.270 --> 02:11.880 Now, a lot of people think that responsive means it's fast, or it loads up quickly, but it actually doesn't. 23 02:11.920 --> 02:18.830 It means that the web site responds to the size of the screen or the viewport. 24 02:19.030 --> 02:25.870 So that means that it looks slightly different when it's on iPad or when it's on desktop or versus when 25 02:25.870 --> 02:27.490 it's on mobile. 26 02:27.490 --> 02:34.630 So let's take a look at how we can implement this super easily using Bootstrap, so that we can use it 27 02:34.630 --> 02:37.830 for our web site’s layout. And, more specifically, 28 02:37.850 --> 02:42.690 I want this title, this big title where it says ‘Meet new and interesting dogs nearby’, 29 02:42.910 --> 02:48.850 plus the two download buttons, to show up on the left side of the screen, taking up roughly half of the 30 02:48.850 --> 02:49.560 screen. 31 02:49.690 --> 02:57.040 And then I want this mobile phone image to take up the right 50 percent of the screen. And then when 32 02:57.040 --> 03:03.370 it goes down to maybe, say, iPhone sized, for everything to be stacked up one on top of each other taking 33 03:03.370 --> 03:05.110 up 100 percent of the width. 34 03:05.110 --> 03:07.620 Now let's load up the documentation for this. 35 03:07.630 --> 03:14.110 So if you go into Documentation, and then Layout, and then we're going to go into Grid to look at the 36 03:14.110 --> 03:24.190 grid system. And you can see that we can create these columns as easily as by using some divs and specifying 37 03:24.220 --> 03:25.940 a few Bootstrap classes. 38 03:25.960 --> 03:31.270 So let's see that in action by launching a new Code Ply. 39 03:31.600 --> 03:37.300 And I want you to follow along with me just so that you can mess around with the code and really fully 40 03:37.300 --> 03:39.010 understand what's going on. 41 03:39.010 --> 03:44.620 So, the first thing I'm going to do is I'm going to change our framework to Bootstrap 4, and at some 42 03:44.620 --> 03:50.190 point in the future, once a lot of people begin using Bootstrap 4, it will become the default selection, 43 03:50.200 --> 03:54.850 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 03:54.850 --> 03:57.060 new framework and the rules for it, 45 03:57.130 --> 04:03.040 so you might see that the default might be Bootstrap 3. But we are going to sit at the bleeding edge 46 04:03.100 --> 04:04.120 of technology, 47 04:04.180 --> 04:08.680 so that is why we’ll always be using the latest version of Bootstrap in our course. 48 04:08.800 --> 04:13.300 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 04:13.300 --> 04:15.880 class of row. 50 04:16.330 --> 04:23.580 Now, inside this div I'm going to create another div, and this one will have a class of column. 51 04:23.590 --> 04:30.490 Now I'm also going to add some inline styles, just so that we can see it more clearly when it gets rendered 52 04:30.550 --> 04:34.930 on screen, and we can differentiate it from other columns or other rows. 53 04:35.140 --> 04:44.450 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 04:44.500 --> 04:50.920 So now let's close off that div, and of course remember that divs don't appear unless they have some 55 04:50.920 --> 04:51.920 content. 56 04:52.120 --> 04:57.990 So, we're just going to give it the name of this class, which is the column that we used. 57 04:58.210 --> 05:05.840 So now, if we hit run, you’ll see that I have this full width column that is taking up the entire 58 05:05.840 --> 05:08.720 width of the screen. 59 05:08.720 --> 05:11.290 So I have basically a single row. 60 05:11.300 --> 05:19.010 Now the interesting thing about this class column is that it will divide up the row to as many sections 61 05:19.040 --> 05:22.810 as it needs in order to equally distribute all of the columns. 62 05:22.820 --> 05:33.080 So that means that, if I have two divs that are both class equals column, then they will both only take 63 05:33.080 --> 05:35.330 up 50 percent of the screen. 64 05:35.660 --> 05:44.800 And equally, if I add a third one, then each of these column divs will take up a third of that row width. 65 05:44.810 --> 05:50.580 Now what if I wanted a column that only took up half of the width of the screen? 66 05:50.840 --> 05:58.520 So, you might think that, OK, the way to do this is to delete that third div so that we have two column 67 05:58.520 --> 06:01.610 divs resting side by side in the same row. 68 06:01.820 --> 06:03.080 Well, you might think that, 69 06:03.110 --> 06:09.660 OK, you could probably use some CSS and, you know, make this div appear white or not there. 70 06:09.730 --> 06:12.740 Well, there's actually a much much easier way using Bootstrap. 71 06:12.890 --> 06:18.560 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 06:18.800 --> 06:24.980 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 06:25.340 --> 06:30.700 that has a class called col-6. 74 06:30.770 --> 06:35.410 And again I'm going to basically add the same style, so background color, 75 06:35.870 --> 06:37.950 and this one I'm going to make green, 76 06:38.240 --> 06:47.110 and then again border, one pixel solid, and I'm going to close off that div. And inside here I'm going 77 06:47.110 --> 06:51.960 to call this col-6, so that we can see it when we run it. 78 06:52.030 --> 06:59.020 Now, you’ll notice that in this case, my column only takes up 50 percent of the width of the screen without 79 06:59.020 --> 07:06.250 the need for anything else on the right. And the cool thing about this is that you can use a number to 80 07:06.250 --> 07:14.810 specify how much of the row do you want to take up. And the total for a single row is 12. 81 07:14.830 --> 07:24.730 So that means that if you add a div that has a number, say col-3, then it will only take up a 82 07:24.730 --> 07:26.090 quarter of the screen. 83 07:26.110 --> 07:33.790 So, remember, 12 divided by 3 equals 4, right? So col-3 only takes up 3 units inside 12 84 07:33.790 --> 07:34.330 units, 85 07:34.330 --> 07:40.810 so therefore it's only a quarter of the screen. And you can repeat this code so that you actually fill 86 07:40.810 --> 07:41.530 up the row. 87 07:41.530 --> 07:45.020 So, for example, you could have a col-2, 88 07:45.190 --> 07:48.540 so that's a sixth of the row, 89 07:48.880 --> 07:55.930 and then you could have something like a col-1, right, go all the way down to the smallest unit, 90 07:56.410 --> 07:59.870 which means this is a twelfth of the row. 91 08:00.010 --> 08:04.310 And now with the 6 plus 3 plus 2 plus 1, we get 12. 92 08:04.420 --> 08:07.810 And so now we fill up the entire width of the row. 93 08:07.820 --> 08:14.440 Now, that's all very well and good, but the only problem with this is that, as you change the size of the 94 08:14.440 --> 08:15.040 viewport, 95 08:15.070 --> 08:24.170 say if we go down to a tablet size or a mobile size, none of these columns change in width. 96 08:24.340 --> 08:31.360 So what if we want something similar to what AirBnB has? You know, where we can say that maybe on 97 08:31.360 --> 08:39.940 the desktop size we would want four columns, right, taking up equal width, but maybe on iPad we only want 98 08:39.940 --> 08:45.470 three columns and on iPhone we only want two columns. 99 08:45.470 --> 08:47.800 So how can we do that? 100 08:47.800 --> 08:53.950 So let's go ahead and add another row where we add a responsive column. 101 08:54.220 --> 08:59.600 So I'm going to create a div that is going to have a class of row. 102 08:59.620 --> 09:07.660 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 09:08.110 --> 09:14.300 and this class is going to be col-md-6. 104 09:14.440 --> 09:19.020 And then I'm just going to paste in our style over here. 105 09:19.970 --> 09:25.670 And I'm going to change the color to blue just so that we can see the difference. And we're going to 106 09:25.670 --> 09:30.370 close off that div, and I'm going to call this col-md-6. 107 09:30.530 --> 09:35.630 And now, if we run our code, you can see that, similar to the col-6, 108 09:35.630 --> 09:41.660 this col-md-6 also takes up 6 units, so half of the screen. 109 09:41.840 --> 09:49.160 But, say if I add another div, you can see that we've got two columns inside our row currently, the blue 110 09:49.160 --> 09:50.050 ones, 111 09:50.150 --> 09:59.870 but, if I switch to a smartphone size, you can see that they each now take up 100 percent of the width 112 10:00.170 --> 10:01.350 of the screen. 113 10:01.580 --> 10:05.350 But on tablet they still take up half of the width. 114 10:05.360 --> 10:14.780 So what this col-md-6 means is that we should have a 6 unit column on any size from medium 115 10:14.780 --> 10:17.430 size or tablet size upwards. 116 10:17.480 --> 10:25.640 So that means tablet, laptop, large desktop, they all will take up six units, but anything smaller than the medium 117 10:25.640 --> 10:28.370 size, namely on mobile, 118 10:28.580 --> 10:30.580 they will take up the full width. 119 10:30.620 --> 10:39.020 So let's delete these two divs in the non-responsive sort of section, and let's change this to a 120 10:39.020 --> 10:40.000 col-6, 121 10:40.040 --> 10:43.570 so we now basically have two 6 column divs. 122 10:43.580 --> 10:49.130 Now let's change this blue, actually, to a yellow, because I think it’ll make the text a little bit more 123 10:49.130 --> 10:52.830 visible, so that you can see it slightly easier. 124 10:53.060 --> 10:57.150 Now, you can see that we've got essentially the same thing in three rows, right? 125 10:57.170 --> 11:04.610 These two are two columns that are taking up 50 percent of the width each, because the entire row has to take 126 11:04.610 --> 11:06.080 up 100 percent. 127 11:06.080 --> 11:12.620 Now the second one, each column is only taking up 6 units, but it's non-responsive. 128 11:12.770 --> 11:19.900 And the third one, each column is only taking up 6 units, as long as it's tablet sized or larger. 129 11:20.090 --> 11:22.340 So let's switch to the laptop size. 130 11:22.340 --> 11:23.980 You can see there's no difference. 131 11:24.170 --> 11:31.550 But now let's switch to the smartphone size, and you can see that the third type of columns actually 132 11:31.550 --> 11:32.550 are responsive. 133 11:32.570 --> 11:39.800 So you can use this code and play around with it to see the difference by specifying that medium keyword 134 11:39.860 --> 11:41.250 and not doing so. 135 11:41.270 --> 11:46.130 Now what if you wanted to be more specific than that? 136 11:46.330 --> 11:49.700 What if you wanted to recreate the AirBnB experience, 137 11:49.700 --> 11:59.500 so you have four items per row, or four columns rather, on desktop, but then on tablet to only have three, 138 11:59.690 --> 12:03.270 and then on mobile to only have two? 139 12:03.320 --> 12:06.870 How would you do that using Bootstrap? 140 12:07.070 --> 12:12.780 Well, let's modify our third row so that we have something that works in a similar way. 141 12:12.890 --> 12:16.010 So the first thing is that we need four divs to play around with. 142 12:16.010 --> 12:24.620 So I'm going to add another two divs to the bottom, and now we have four divs that are in this responsive 143 12:24.830 --> 12:25.820 kind of mode. 144 12:25.910 --> 12:34.340 Let's start from the simplest, which is I want there to be four columns on desktop, so 12 divided by 145 12:34.340 --> 12:35.950 4 is 3, 146 12:35.960 --> 12:46.050 so we need a 3 unit column. And we can specify this by changing the keyword to large. 147 12:46.130 --> 12:51.450 So now we have col-lg-3. 148 12:51.620 --> 12:57.460 And if you run that you can see that we've got a 3 unit column on desktop. 149 12:57.500 --> 13:05.360 So let's go ahead and change all of the other divs to this kind of format. 150 13:05.900 --> 13:14.690 So, if we run now, you'll see that we have four columns, each taking up three units on desktop, but anything 151 13:14.690 --> 13:18.550 smaller than desktop, they will take up 100 percent of the width. 152 13:18.680 --> 13:22.640 So on tablet and on mobile they will take up 100 percent. 153 13:22.820 --> 13:24.550 So that's not quite what we want, 154 13:24.560 --> 13:30.460 because on tablet we want it to take up a third of the row. 155 13:30.710 --> 13:34.420 So 12 divided by 3 is 4. 156 13:35.090 --> 13:42.020 So let's add another rule in here where we say on the medium sized screens and above, we want to have 157 13:42.110 --> 13:44.580 a 4 unit column. 158 13:44.840 --> 13:53.430 So now let's again replace all of these other divs with this new format. 159 13:53.600 --> 14:03.110 And, if we run our code, you'll see that, on the tablet size, each of these columns now take up four units 160 14:03.260 --> 14:10.280 when we're on the tablet or the medium size, and on desktop it goes to that col-lg-3 rule 161 14:10.580 --> 14:12.950 and becomes a three unit column, 162 14:12.950 --> 14:17.550 and similarly on the large desktop it's also the same. 163 14:17.600 --> 14:19.730 Now what about mobile? 164 14:19.820 --> 14:27.140 Well it's still taking up 100 percent of the width, unless we specify another class. 165 14:27.140 --> 14:33.530 So, on the smaller size screen, we want each column to take up only 50 percent of the width, so that we 166 14:33.530 --> 14:39.620 end up with two columns per row. So two columns per row means 12 divided by 2. 167 14:39.620 --> 14:42.520 So that's a six unit column. 168 14:42.890 --> 14:53.450 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 14:53.450 --> 14:55.030 this first one 170 14:56.490 --> 14:58.470 and paste it in. 171 14:58.470 --> 15:03.790 So we now have four divs which take up a quarter of the width 172 15:04.080 --> 15:14.160 when we're on the desktop size or larger, but only a third of the width when we're on tablet, and only 173 15:14.190 --> 15:17.510 half of the width when we're on mobile. 174 15:17.640 --> 15:23.020 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 15:23.030 --> 15:26.630 actually pushes it to the next row automatically. 176 15:26.640 --> 15:29.620 Now there's a lot of new ideas in this lesson, 177 15:29.670 --> 15:36.240 and in order to really fully understand this concept, you will need to have a play around with the code 178 15:36.330 --> 15:37.350 yourself. 179 15:37.380 --> 15:45.000 So, as a challenge, I want you to create another set of responsive columns, but this one is going to have 180 15:45.000 --> 15:48.300 slightly different rules from the previous row. 181 15:48.330 --> 15:53.500 So, if you already followed along with the code, you should have your own version of this Code Ply. 182 15:53.520 --> 15:59.190 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 15:59.190 --> 16:07.530 Code Ply, and you can copy the code in my HTML section, and paste it to your own Code Ply. 184 16:07.530 --> 16:15.330 Now, what I want you to do is to create another row below these three, and you can give it a different 185 16:15.360 --> 16:16.270 color. 186 16:16.290 --> 16:20.880 Now, it doesn't matter what you choose, as long as you can see the difference from the previous rows. 187 16:20.880 --> 16:26.550 Now, for this particular set of columns, I want you to make it responsive. 188 16:26.550 --> 16:28.690 So on the larger sizes, 189 16:28.710 --> 16:35.920 so desktop and also on laptop, you should have six columns per row. 190 16:35.970 --> 16:45.600 Now, on tablet you should only have four columns per row, and on mobile they should each take up 100 percent 191 16:45.630 --> 16:46.450 of the width. 192 16:46.680 --> 16:51.330 So, pause the video now and see if you can complete this challenge. 193 16:51.330 --> 16:51.720 All right. 194 16:51.720 --> 16:53.740 So how did that go? 195 16:54.090 --> 16:59.420 Well, in order to complete the challenge, you really need to understand how the grid system works. 196 16:59.550 --> 17:07.760 And, if you get stuck, always remember that there's always the documentation to go back to. 197 17:07.890 --> 17:11.760 Now, once you've read that and it all makes sense, then we can get started. 198 17:11.910 --> 17:18.000 So, we're going to create another div, of course, and this will be the row which is going to contain our 199 17:18.000 --> 17:25.370 columns, and inside this row we're going to create a new column. 200 17:25.560 --> 17:31.800 Now here we have to think carefully. What we want is that, on the larger sizes, 201 17:31.800 --> 17:40.740 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 17:41.130 --> 17:42.240 of the width. 203 17:42.510 --> 17:46.830 So that's going to be col-lg-2. 204 17:46.920 --> 17:53.670 Now, the other thing we want to happen is that, on the medium sizes, on the tablet size and above, we want 205 17:53.670 --> 18:02.800 to have a three unit column, so that's col-md-3, because 12 divided by 3 is 4, 206 18:02.880 --> 18:06.780 so that's four columns per row, which is what we wanted. 207 18:06.930 --> 18:14.310 Now, for the smaller size, you can either say col-sm-12 for the columns to take up the full 208 18:14.310 --> 18:20.670 100 percent of the width, or you can actually leave that out because by default all of the columns 209 18:20.730 --> 18:23.620 should take up 100 percent of the width. 210 18:23.670 --> 18:32.300 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 18:32.310 --> 18:35.770 So, in this case I'm going to change my background color to grey. 212 18:35.880 --> 18:38.340 Now it doesn't really matter what you choose. 213 18:38.430 --> 18:45.720 And then I'm going to add the text here into my div, so that my div actually shows up, because it has 214 18:45.780 --> 18:48.800 some content rather than just style. 215 18:49.050 --> 18:51.290 So now let's hit run. 216 18:52.140 --> 18:56.150 And we've now got this column that takes up a sixth of the width. 217 18:56.160 --> 19:03.510 Now, in order to make that a little bit more visible, I'm going to copy this and paste in another five copies, 218 19:04.170 --> 19:12.080 and we can count that there's now six columns in our row on the laptop and on the desktop sizes. 219 19:13.170 --> 19:19.530 Now, the next step to check is what happens on tablet. And you can see the rule of col-md-3 220 19:19.530 --> 19:27.570 means that we have three unit columns, so 12 divide by 3 is 4 columns per row on the tablet 221 19:27.570 --> 19:34.950 size, and on the mobile size we have 100 percent of the width, because we've only specified that anything 222 19:35.010 --> 19:41.430 above medium should be 3 units, and anything below automatically becomes 100 percent. 223 19:41.430 --> 19:46.100 So, if you didn't manage to get it, create it now, and see if it makes sense. 224 19:46.140 --> 19:53.400 And also just mess around with the layout, you know, try to make a row that has, maybe, 12 items on large 225 19:53.400 --> 20:00.260 sizes, or, maybe, only six items on the smaller mobile screen. 226 20:00.420 --> 20:07.130 But basically, the key to understanding this is trying to get the code to do what you want it to, 227 20:07.230 --> 20:11.020 and that way you'll understand how all of these classes work. 228 20:11.370 --> 20:16.750 And if you get confused, there's always the grid system documentation to fall back on.