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