WEBVTT 0 00:00.260 --> 00:00.620 All right. 1 00:00.620 --> 00:07.130 So now that we've had a little bit of a taste of what Bootstrap can do, let's dive deep into one of 2 00:07.130 --> 00:12.590 the most powerful features of Bootstrap, which is the 12-column Layout System. 3 00:13.070 --> 00:17.450 The 12-column system is made of three components. 4 00:17.570 --> 00:26.540 Firstly, we need a div that has a class of "container" and this is going to be the starting point. 5 00:26.630 --> 00:36.320 Next inside that container, we need another div which is going to be of class "row" and inside the row 6 00:36.350 --> 00:42.570 is where we will have our items and they will be laid out using the column system. 7 00:42.590 --> 00:46.160 So what does this look like in code? 8 00:46.190 --> 00:48.410 Well, it's pretty simple. 9 00:48.410 --> 00:57.980 We have a container that contains a single row and then within the row we can have as many items as 10 00:57.980 --> 00:58.700 we like, 11 00:58.700 --> 01:02.250 and they're laid out using the column class (col). 12 01:02.520 --> 01:04.020 Pretty simple so far 13 01:04.020 --> 01:08.130 and you're probably thinking, well, there's nothing very groundbreaking here. 14 01:08.340 --> 01:15.090 Now, the interesting thing starts happening when you have multiple columns laid out inside these rows, 15 01:15.240 --> 01:24.240 because automatically Bootstrap will try to give every column inside the row equal spacing and space 16 01:24.240 --> 01:28.110 them across the entire width of the container. 17 01:28.850 --> 01:38.210 So if you had a container which included a row that had one, two, three, four, five, six divs in 18 01:38.240 --> 01:45.230 there, each with the class set as col short for column, then it will divide up the entire width by 19 01:45.230 --> 01:45.850 six. 20 01:45.860 --> 01:50.450 And if you had three of them then it would give each of them a third of the space. 21 01:50.810 --> 01:54.410 Now the bootstrap container is responsive. 22 01:54.410 --> 02:01.730 So by defining a div with the class of container, you're actually telling it to have a different size 23 02:01.760 --> 02:04.070 on different sized screens. 24 02:04.100 --> 02:13.010 If we had an XL or an XXL screen, so like a desktop or a TV or something, then that container is going 25 02:13.010 --> 02:20.390 to be this size and you can see that there's several breakpoints that are responsive to the different 26 02:20.390 --> 02:22.280 device screen sizes. 27 02:22.310 --> 02:32.160 On mobile, maybe the container would be 540px, on an iPad, maybe it would be 720 or 960px, 28 02:32.160 --> 02:36.300 and on desktop, maybe it would be about 1000px. 29 02:36.510 --> 02:44.370 You can use the dash (-) plus these different letters to specify at which point you want your container 30 02:44.370 --> 02:44.610 to be 31 02:44.610 --> 02:45.810 100%. 32 02:45.990 --> 02:55.050 "Container-sm" is the same as the normal container, but "container-md" or medium means that on small screens 33 02:55.050 --> 02:59.190 the container would already reach 100% of the width of the screen. 34 02:59.190 --> 03:05.010 And again, remember, all of these sizes here are referring to the width of the viewport. 35 03:05.010 --> 03:07.650 So only this dimension. 36 03:07.860 --> 03:15.930 And then as we go down the line, we're starting to specify a 100% width on larger and larger screens 37 03:15.930 --> 03:23.340 until we reach this container fluid, which basically says that on all screen sizes, we want it to 38 03:23.340 --> 03:28.320 reach from edge to edge, which is 100% width. In most cases, 39 03:28.320 --> 03:34.800 you will see these two being used quite frequently because the container gives a nice sort of margin 40 03:34.800 --> 03:36.630 around the left and the right, 41 03:36.630 --> 03:40.260 and the container-fluid is when you want that edge-to-edge behavior. 42 03:41.300 --> 03:45.920 The layout system gets more interesting when we start using sized columns. 43 03:45.920 --> 03:52.550 Instead of just writing col as the class, we can actually set the class as for example, col-2 44 03:52.550 --> 03:54.140 or col-4 45 03:54.170 --> 04:05.000 and what this is saying is if we think of each of our rows as having 12 columns and we split them all 46 04:05.000 --> 04:09.620 up into the 12 equal size columns like this. 47 04:09.620 --> 04:11.960 So if you count this is actually a total of 12. 48 04:11.990 --> 04:18.280 Then when we create a div we can specify well how many of these columns do we want to occupy? 49 04:18.290 --> 04:26.180 In this case, this div wants two of those columns, and then this one wants four of them, and then the final 50 04:26.180 --> 04:27.950 one wants six. 51 04:28.100 --> 04:35.930 Based on the classes that you choose, Bootstrap will know how much space to allocate each div on a 52 04:35.930 --> 04:37.460 percentage basis. 53 04:37.460 --> 04:45.810 So you could view the col-6 as 50%, and the col-2 as one-sixth of the entire width and so on and 54 04:45.810 --> 04:46.440 so forth. 55 04:46.440 --> 04:53.730 So you can use all of the numbers col-1 all the way up to col-12 and you can split up the proportion 56 04:53.730 --> 04:56.700 of your screen and the content inside. 57 04:56.700 --> 05:04.290 So maybe you would have a navigation section on the left that you only want to take up 2 out of 12 58 05:04.290 --> 05:11.280 width, and then the main content here maybe could take up 10 out of 12 of the width, and so on and so 59 05:11.280 --> 05:11.520 forth. 60 05:11.520 --> 05:18.540 And this is a really, really easy and intuitive way of sizing your content using Bootstrap. And this 61 05:18.540 --> 05:20.220 is what the code would look like, 62 05:20.220 --> 05:25.530 so we have three divs and we're giving this one 2 out of 12, 4 out of 12, 6 out of 12, 63 05:25.530 --> 05:28.590 and this is the layout that we end up with 64 05:28.590 --> 05:31.050 and we didn't have to write any CSS. 65 05:31.080 --> 05:34.680 All we had to do was add in the pre-built layout classes. 66 05:34.770 --> 05:42.090 Again, it's really important to know that Bootstrap has predefined breakpoints and these dimensions 67 05:42.090 --> 05:45.480 are defined based on common screen-sizes. 68 05:45.480 --> 05:51.630 And even though these numbers are constantly changing, generally I would say that small is for mobile 69 05:51.630 --> 05:56.310 devices, medium is for tablets and iPads. 70 05:56.710 --> 06:05.880 A large is for laptop, extra large is for desktop, and extra extra large is for anything crazy like 71 06:05.880 --> 06:07.470 maybe a TV or something. 72 06:07.470 --> 06:11.880 And extra small is for devices that are maybe longer than they are wide. 73 06:11.880 --> 06:16.590 So maybe foldable phones and even really narrow phone screens. 74 06:16.890 --> 06:24.030 Now, one thing I want to draw your attention to is the directionality of the signs here. 75 06:24.180 --> 06:31.620 All of these breakpoints, which will often use, for example, col-sm-2, 76 06:31.800 --> 06:40.410 this section refers to the screens which are greater than this dimension. 77 06:40.410 --> 06:51.150 So that means the small breakpoint is between here and here and covers the range between 576 and 768, 78 06:51.150 --> 06:53.370 and each of them always go up. 79 06:53.370 --> 06:58.260 So this is an important point to keep in mind when you're dealing with the Bootstrap breakpoints. 80 06:58.530 --> 07:03.660 Now, one of the great things about Bootstrap breakpoints is we don't really need the media queries 81 07:03.660 --> 07:10.440 as much because this covers pretty much a lot of the different device dimensions and we don't have to 82 07:10.440 --> 07:15.120 manually write all the pixel sizes, and add media queries into our CSS. 83 07:15.150 --> 07:21.840 We can target the different sizes and make our website responsive by using the pre-built breakpoints. 84 07:22.410 --> 07:26.250 Here's an example of the Bootstrap breakpoints. Here 85 07:26.250 --> 07:35.850 we're saying that on a small screen and above we want the dimension ratio to be two, four and six. 86 07:35.850 --> 07:40.860 So this means that on desktop, on laptop, on TV, it's all going to have this size. 87 07:40.860 --> 07:42.570 And even on mobile as well. 88 07:42.600 --> 07:49.740 But below the size of mobile, it is not defined as having these proportions. 89 07:49.740 --> 07:54.660 So it will default to giving each of these divs 100%. 90 07:55.260 --> 07:58.050 And similarly, if you don't add a number here. 91 07:58.050 --> 08:02.490 So we could for example, here it's 12 columns, 12/3, 92 08:02.490 --> 08:05.040 so these are actually col-sm-4's, 93 08:05.040 --> 08:10.350 but if we don't define a number, you remember that they will automatically distribute. 94 08:12.210 --> 08:17.910 But what would it look like if we reduce the screen size to less than a mobile size? 95 08:17.940 --> 08:26.040 Well, all of these divs will go to 100% width. When the overall width is less than 576, 96 08:26.250 --> 08:32.730 then all of these items default to as if they just had a column defined. 97 08:32.730 --> 08:41.670 So col as the class and the col class by default is going to take up 100% of the width in the 98 08:41.670 --> 08:42.600 small-sized screen. 99 08:43.150 --> 08:48.330 Now in a single div, you can actually also have multiple breakpoints. 100 08:48.340 --> 08:58.750 So in this case, what it's saying is on the large devices and above, then it should take up four out 101 08:58.750 --> 09:00.760 of 12 of the width. 102 09:01.030 --> 09:04.600 On medium sizes and above, 103 09:04.600 --> 09:06.550 well, because the above is already defined, 104 09:06.550 --> 09:13.840 so then this case is only on medium devices, then it should take 8 out of 12 of the width and 105 09:13.870 --> 09:17.710 on small devices it should take up 12 out of 12. 106 09:17.710 --> 09:18.940 So full width. 107 09:19.450 --> 09:22.870 Here we're simulating a large screen. 108 09:22.870 --> 09:28.540 So maybe on a laptop or a desktop, then it's taking up 4 out of 12. 109 09:28.570 --> 09:30.790 It's this kind of proportion. 110 09:30.790 --> 09:34.410 And then we go over to the next size down. 111 09:34.420 --> 09:39.850 So on an iPad, then it's going to take up 8 out of 12 of the screen. 112 09:39.850 --> 09:46.400 And just for example sakes', let's go down even further to a mobile size where we want it to take 113 09:46.400 --> 09:49.820 up 100% or full width of the screen. 114 09:49.820 --> 09:55.160 Because as you imagine, when we have more screen real estate, it's easier to see things, 115 09:55.160 --> 10:00.500 and when we're working on smaller screens, we want to make things generally a bit larger so that it's 116 10:00.500 --> 10:03.260 easier for users to see our content. 117 10:03.830 --> 10:10.730 In addition to having multiple breakpoints in each div, you can also mix and match the types of definitions. 118 10:10.730 --> 10:16.040 So for example, here we've got two-sized columns, col-2 and col-4. 119 10:16.040 --> 10:21.530 So it's always going to take up 2 out of 12, this section four out of 12 here, 120 10:21.530 --> 10:25.620 but this last one, notice how we've just left it as the column class. 121 10:25.640 --> 10:31.490 Now this means that it's going to automatically adjust in size in order to take up whatever proportion 122 10:31.490 --> 10:32.450 remains. 123 10:33.130 --> 10:40.270 Bootstrap layout is a little bit complicated when you're first working with it, and it's really important 124 10:40.270 --> 10:46.780 that you read the docs and also have plenty of practice before things start to make more sense. 125 10:46.780 --> 10:54.730 So in order for you to practice, I've created a website at appbrewery.github.io/bootstrap-layout, 126 10:54.970 --> 11:00.220 and if you go to this website you'll see that I've got three exercises in total for you. 127 11:00.490 --> 11:07.570 The idea of the exercises is that at the top there will be a demo area, which is the effect that you're 128 11:07.570 --> 11:08.740 trying to achieve. 129 11:08.770 --> 11:15.250 For example, in this case, we want these divs to be 50% on desktop and 100% on mobile. 130 11:15.250 --> 11:24.310 So as I reduce the width, you'll see that it gets to a point where we reach that sm breakpoint, where it 131 11:24.310 --> 11:27.280 goes into 100% width. 132 11:27.520 --> 11:33.050 As you scroll down, each of the different exercises will have different proportions, 133 11:33.050 --> 11:41.090 and what you want to do is to modify the HTML code inside here, which is responsible for the styling 134 11:41.090 --> 11:45.410 of the area that you control, which are the divs underneath the examples, 135 11:45.410 --> 11:52.910 and I want you to add the classes for using the 12-column layout system so that your area behaves exactly 136 11:52.910 --> 11:55.700 the same as the top-area 137 11:55.700 --> 12:00.380 when you reduce the size and hit the various different breakpoints. 138 12:00.860 --> 12:08.030 If you get stuck, be sure to check out the Layout Section of the Bootstrap Documentation and here you'll 139 12:08.030 --> 12:10.700 see the different Bootstrap breakpoints. 140 12:10.700 --> 12:19.490 Also, you can read up more on how the columns work, how the containers work, and how the grid system 141 12:19.490 --> 12:20.270 works. 142 12:20.510 --> 12:23.600 Pause the video now and give this challenge a go. 143 12:26.320 --> 12:30.910 So hopefully you've given this a go and you've managed to get everything to work correctly. 144 12:30.940 --> 12:33.070 Let's go through the solution together. 145 12:33.250 --> 12:38.560 The first example says it should be 50% on desktop and 100% on mobile. 146 12:38.590 --> 12:47.860 We know that the desktop breakpoint is the XL, so we can define col-xl-6, and 6 out 147 12:47.860 --> 12:50.560 of 12 is of course 50%. 148 12:50.590 --> 12:59.350 Now in order to get it to be 100% on mobile, we could say col-sm-12, which is 100% and we 149 12:59.350 --> 13:01.150 can add that to both divs. 150 13:01.180 --> 13:07.360 Now if I go ahead and set apply changes, you can see now when I reduce the width of the window that 151 13:07.360 --> 13:14.860 it's going to hit that breakpoint where below which, it's no longer going to be 50% and it's going to 152 13:14.860 --> 13:17.680 start taking up the full width. 153 13:18.580 --> 13:25.420 Now, you might remember from previously we said that the Bootstrap breakpoints, target sizes, this 154 13:25.420 --> 13:27.450 particular size and above, 155 13:27.470 --> 13:35.120 so when we define col-xl-6, we're saying anything that's above the XL breakpoint, which is greater 156 13:35.120 --> 13:39.110 than 1200px, should be 50%. 157 13:39.200 --> 13:44.270 You might have realized that you don't actually need to define this because everything else is going 158 13:44.270 --> 13:45.860 to default to 100%. 159 13:45.860 --> 13:51.530 So if I apply changes again, you can see that my purple example still behaves the same as the green 160 13:51.530 --> 13:52.310 example, 161 13:52.310 --> 13:58.220 and I've only changed the behavior of the XL size and above and changed its layout. 162 13:58.820 --> 14:02.020 All right, so let's go to exercise Number 2. 163 14:02.030 --> 14:07.310 And in this case, I haven't given you exactly what they should do or how they should behave, 164 14:07.310 --> 14:14.240 and instead, I wanted you to simply just reduce the width of the screen to see how it changes through 165 14:14.240 --> 14:15.710 the different sizes. 166 14:15.800 --> 14:17.100 The first one's easy, 167 14:17.120 --> 14:23.240 pretty much all of the larger sizes, all the way down to the large breakpoint takes up the full 168 14:23.240 --> 14:26.570 12-width column. And you can take out a ruler if you want to measure the screen, 169 14:26.570 --> 14:30.800 but we can see that Column 1 is roughly half of the width of the row, 170 14:30.830 --> 14:37.010 Columns 2 and 3 are pretty much equal-size, so it's probably going to be six, three and three. 171 14:37.340 --> 14:41.960 Let's modify this so that we target the large breakpoint first. 172 14:41.960 --> 14:47.510 So we'll say col-lg-6 for the first column. 173 14:47.540 --> 14:54.860 The second column is going to be col-lg-3, and the same for the third column. 174 14:54.860 --> 15:00.350 So now if I click apply changes, you can see it's now taking up the same proportions, 175 15:00.350 --> 15:08.360 but when we hit this breakpoint that's below the large breakpoint, our columns by default go to 100%, 176 15:08.390 --> 15:11.390 whereas the example actually does something different. 177 15:11.420 --> 15:16.460 The top column takes up 100% and the other two take up half of the width. 178 15:16.460 --> 15:21.260 And you can see that behavior continues all the way until the very small size. 179 15:21.260 --> 15:24.710 So that means that we've got an sm breakpoint there defined. 180 15:24.740 --> 15:29.450 Now, once you've worked with this for a long time, you can spot each of the breakpoints pretty much 181 15:29.450 --> 15:30.290 by eye, 182 15:30.320 --> 15:36.020 but initially you can always just switch around, try different ones, try the sm, try the xl and see 183 15:36.020 --> 15:38.880 which ones actually behave like the example. 184 15:38.900 --> 15:44.030 There's nothing wrong with trial and error. When it hits the smaller screen size, 185 15:44.120 --> 15:51.650 our Column 1 is going to take up the full width of the row and then the other two on the smaller breakpoint 186 15:51.650 --> 15:54.110 are going to take up half of the width. 187 15:54.110 --> 15:56.000 So col-sm-6. 188 15:56.590 --> 15:59.440 And similarly, the third one does the same thing. 189 15:59.440 --> 16:00.940 So let's apply the change 190 16:00.940 --> 16:05.410 and you can see now at this breakpoint, they also behave exactly the same. 191 16:05.410 --> 16:12.430 So now all we have left is the final one, which is just the smallest breakpoint for the columns. 192 16:12.430 --> 16:19.560 And here what's actually happening is each of these columns are taking up 10 out of 12 of the columns. 193 16:19.570 --> 16:23.590 Now, I can spot that by eye, but also I created this exercise, so I know, 194 16:23.590 --> 16:26.770 but if you try some different numbers, you'll probably get there as well. 195 16:26.770 --> 16:35.380 So if we define the smallest size as column, let's just try an 8 to start with so I can show you 196 16:35.380 --> 16:37.210 this trial and error process. 197 16:37.210 --> 16:40.690 And we know that all the columns behave the same at that breakpoint. 198 16:40.690 --> 16:45.640 If we click apply changes and we go here, we can see, well, eight is clearly too small. 199 16:45.640 --> 16:50.590 So let's go up a size and let's change to 10 out of 12. 200 16:50.590 --> 16:58.880 And once I hit apply changes, you can see we now have both sets of columns behaving exactly the same 201 16:58.880 --> 17:00.710 at all the different breakpoints. 202 17:00.710 --> 17:05.990 This one was a little bit harder, admittedly, and it required a little bit more thinking and probably 203 17:05.990 --> 17:07.520 trial and error on your part, 204 17:07.520 --> 17:12.950 but hopefully, by the end of it, you will understand a bit better about how these different breakpoints 205 17:12.950 --> 17:15.260 work and at which points they hit. 206 17:15.260 --> 17:20.180 So now for the final exercise, and this one we've got two columns, 207 17:20.180 --> 17:29.150 initially, they start out in one line taking up a particular proportion, and then we hit a certain breakpoint 208 17:29.150 --> 17:31.820 and it changes the proportion. 209 17:32.120 --> 17:37.700 Column 1 gets a little bit wider, takes up more space compared to Column 2. 210 17:37.700 --> 17:44.390 And then if we reduce a little bit more, that changes again at the next breakpoint and then again and 211 17:44.390 --> 17:46.430 then finally taking up full width. 212 17:46.640 --> 17:52.010 So let's start with the largest breakpoint we know, which is the xxl, 213 17:52.340 --> 17:56.210 let's say that col-xxl 214 17:56.210 --> 18:02.240 and let's define it as 1 out of 12, and then give the other half, 215 18:02.360 --> 18:05.150 12 minus one is 11. 216 18:05.150 --> 18:09.770 And now let's apply the change and you can see that is the correct proportion. 217 18:10.040 --> 18:12.740 Again, this might require trial and error on your part. 218 18:12.770 --> 18:14.090 Don't be too hard on yourself. 219 18:14.090 --> 18:17.150 If you didn't manage to get it first time, I wouldn't be able to either, 220 18:17.150 --> 18:19.760 if it was somebody else's exercise like this. 221 18:19.850 --> 18:26.630 Now let's hit the next breakpoint just about here, and this is going to be the next breakpoint down, 222 18:26.630 --> 18:28.070 this is the xl. 223 18:28.100 --> 18:34.580 We've just hit 1200px... And a tip for working with responsiveness, 224 18:34.580 --> 18:39.580 when you're wondering how do I know that it's the 1200px breakpoint that got hit? 225 18:39.590 --> 18:46.880 If you go into the Chrome Developer Tools and click on this button to toggle the device toolbar and 226 18:46.880 --> 18:54.080 change the dimensions to Responsive, then you can click this drag bar and look at the top here. 227 18:54.080 --> 19:01.850 This is the important width that we need to look at. Once I expand it to 1200, you can see that jump 228 19:01.850 --> 19:04.340 in size happen just around there. 229 19:04.340 --> 19:12.140 So we know that the 1200px breakpoint is the xl breakpoint, and you can work this out this way as well. 230 19:12.140 --> 19:16.250 So just a tip for the future when you're working with any kind of responsiveness, 231 19:16.250 --> 19:21.650 this is really useful to know, but most of the time I would judge responsiveness just by eye when you're 232 19:21.650 --> 19:24.350 designing the layout to see what looks good. 233 19:25.010 --> 19:30.830 All right, so let's hit the next breakpoint at the xl size1200px. 234 19:30.830 --> 19:36.650 So this is col-xl, and I reckon this is a ratio of 2 to 10. 235 19:36.650 --> 19:44.330 So let's do col-xl-2, col-xl-10, let's apply our changes, and that's pretty good. 236 19:44.330 --> 19:52.070 So now let's keep reducing until we hit the next breakpoint and this is going to be the next level down, 237 19:52.070 --> 19:53.690 which is large, 238 19:53.720 --> 19:58.040 lg, and I reckon this is probably 4 to 8. 239 19:58.040 --> 20:06.620 So col-lg-4 and the next one will be col-lg-8. 240 20:06.620 --> 20:11.900 And notice that each of these always add up to 12 because you can see in the example layout, they're 241 20:11.900 --> 20:13.610 only taking up one row. 242 20:13.640 --> 20:18.500 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 243 20:18.500 --> 20:19.760 that we specified. 244 20:20.000 --> 20:23.030 Now we have the next breakpoint, which is the col-md, 245 20:23.030 --> 20:28.550 and this one's easy to spot because it's half/half, so it's going to be 6, 246 20:28.550 --> 20:35.150 And finally we have the rest are by default going to take up 100%. 247 20:35.150 --> 20:38.420 So you could define the sm, but that's also the default behavior. 248 20:38.420 --> 20:39.770 So you could also leave it out. 249 20:40.130 --> 20:41.000 There you have it. 250 20:41.000 --> 20:42.620 That's the final solution 251 20:42.620 --> 20:48.650 code for Exercise 3 and Exercise 2 and Exercise 1. 252 20:48.650 --> 20:52.670 Hopefully, you managed to get there in the end, even if there was a little bit of trial and error and 253 20:52.670 --> 20:53.810 some difficulty, 254 20:53.810 --> 20:55.880 but once you've used Bootstrap layout 255 20:55.890 --> 20:56.580 a few times, 256 20:56.580 --> 20:58.170 you'll get used to this idea. 257 20:58.170 --> 21:01.680 And it's a really intuitive way to layout our screen, 258 21:01.680 --> 21:06.270 and it's really easy to manipulate and to create different layout designs. 259 21:06.660 --> 21:11.130 Now, in the next lesson, we're going to be talking through the different Bootstrap Components. 260 21:11.130 --> 21:13.650 So for all of that and more, I'll see you there.