1 00:00:00,300 --> 00:00:01,560 Instructor: All right, so now that we've had 2 00:00:01,560 --> 00:00:05,280 a little bit of a taste of what Bootstrap can do, 3 00:00:05,280 --> 00:00:06,510 let's dive deep 4 00:00:06,510 --> 00:00:09,720 into one of the most powerful features of Bootstrap 5 00:00:09,720 --> 00:00:12,543 which is the 12 column layout system. 6 00:00:13,380 --> 00:00:17,880 The 12 column system is made of three components. 7 00:00:17,880 --> 00:00:22,880 Firstly, we need a div that has a class of container 8 00:00:23,820 --> 00:00:26,940 and this is going to be the starting point. 9 00:00:26,940 --> 00:00:31,440 Next, inside that container, we need another div 10 00:00:31,440 --> 00:00:34,950 which is going to be of class row, 11 00:00:34,950 --> 00:00:39,150 and inside the row is where we will have our items 12 00:00:39,150 --> 00:00:42,870 and they will be laid out using the column system. 13 00:00:42,870 --> 00:00:46,530 So what does this look like in code? 14 00:00:46,530 --> 00:00:48,450 Well, it's pretty simple. 15 00:00:48,450 --> 00:00:53,450 We have a container that contains a single row, 16 00:00:54,360 --> 00:00:55,650 and then within the row, 17 00:00:55,650 --> 00:00:58,950 we can have as many items as we like 18 00:00:58,950 --> 00:01:02,640 and they're laid out using the column class. 19 00:01:02,640 --> 00:01:05,670 Pretty simple so far, and you are probably thinking, 20 00:01:05,670 --> 00:01:08,550 well, there's nothing very groundbreaking here. 21 00:01:08,550 --> 00:01:10,440 Now the interesting thing starts happening 22 00:01:10,440 --> 00:01:15,420 when you have multiple columns laid out inside these rows 23 00:01:15,420 --> 00:01:19,260 because automatically, Bootstrap will try to give 24 00:01:19,260 --> 00:01:23,520 every column inside the row equal spacing 25 00:01:23,520 --> 00:01:27,993 and space them across the entire width of the container. 26 00:01:29,100 --> 00:01:32,970 So if you had a container which included a row 27 00:01:32,970 --> 00:01:36,000 that had one, two, three, four, 28 00:01:36,000 --> 00:01:38,670 five, six divs in there 29 00:01:38,670 --> 00:01:42,930 each with the class set as col, short for column, 30 00:01:42,930 --> 00:01:46,140 then it will divide up the entire width by six. 31 00:01:46,140 --> 00:01:47,400 And if you had three of them, 32 00:01:47,400 --> 00:01:51,120 then it would give each of them a third of the space. 33 00:01:51,120 --> 00:01:54,690 Now the Bootstrap container is responsive, 34 00:01:54,690 --> 00:01:58,530 so by defining a div with the class of container, 35 00:01:58,530 --> 00:02:01,950 you are actually telling it to have a different size 36 00:02:01,950 --> 00:02:04,380 on different sized screens. 37 00:02:04,380 --> 00:02:07,680 If we had an XL or an XXL screen, 38 00:02:07,680 --> 00:02:10,830 so like a desktop or a TV or something, 39 00:02:10,830 --> 00:02:15,000 then that container is going to be this size 40 00:02:15,000 --> 00:02:17,790 and you can see that there's several breakpoints 41 00:02:17,790 --> 00:02:22,470 that are responsive to the different device screen sizes. 42 00:02:22,470 --> 00:02:26,700 On mobile, maybe the container would be 540 pixels. 43 00:02:26,700 --> 00:02:31,700 On an iPad, maybe it would be 720 or 960 pixels, 44 00:02:32,280 --> 00:02:36,660 and on desktop maybe it would be about 1,000 pixels. 45 00:02:36,660 --> 00:02:40,950 You can use the dash plus these different letters 46 00:02:40,950 --> 00:02:44,310 to specify at which point you want your container 47 00:02:44,310 --> 00:02:46,110 to be a hundred percent. 48 00:02:46,110 --> 00:02:49,830 container-sm is the same as the normal container, 49 00:02:49,830 --> 00:02:54,830 but container-md or medium means that on small screens, 50 00:02:55,050 --> 00:02:57,300 the container would already reach a hundred percent 51 00:02:57,300 --> 00:02:59,280 of the width of the screen. 52 00:02:59,280 --> 00:03:01,830 And again, remember all of these sizes here 53 00:03:01,830 --> 00:03:04,950 are referring to the width of the viewport, 54 00:03:04,950 --> 00:03:08,190 so only this dimension. 55 00:03:08,190 --> 00:03:10,620 And then as we go down the line, 56 00:03:10,620 --> 00:03:14,220 we're starting to specify a hundred percent width 57 00:03:14,220 --> 00:03:15,930 on larger and larger screens 58 00:03:15,930 --> 00:03:19,050 until we reach this container-fluid 59 00:03:19,050 --> 00:03:22,440 which basically says that on all screen sizes, 60 00:03:22,440 --> 00:03:24,870 we want it to reach from edge to edge, 61 00:03:24,870 --> 00:03:26,970 which is a hundred percent width. 62 00:03:26,970 --> 00:03:28,290 In most cases, 63 00:03:28,290 --> 00:03:31,590 you will see these two being used quite frequently 64 00:03:31,590 --> 00:03:34,740 because the container gives a nice sort of margin 65 00:03:34,740 --> 00:03:36,780 around the left and the right 66 00:03:36,780 --> 00:03:37,890 and the container-fluid 67 00:03:37,890 --> 00:03:40,173 is when you want that edge-to-edge behavior. 68 00:03:41,490 --> 00:03:43,380 The layout system gets more interesting 69 00:03:43,380 --> 00:03:46,080 when we start using sized columns. 70 00:03:46,080 --> 00:03:48,810 Instead of just writing col as the class, 71 00:03:48,810 --> 00:03:51,450 we can actually set the class as, for example, 72 00:03:51,450 --> 00:03:53,570 col-2 or col-4. 73 00:03:54,600 --> 00:03:58,950 And what this is saying is if we think of each of our rows 74 00:03:58,950 --> 00:04:02,580 as having 12 columns, 75 00:04:02,580 --> 00:04:05,880 and we split them all up 76 00:04:05,880 --> 00:04:09,720 into the 12 equal size columns, like this. 77 00:04:09,720 --> 00:04:12,270 So if you count, this is actually total of 12, 78 00:04:12,270 --> 00:04:15,150 then when we create a div, we can specify, 79 00:04:15,150 --> 00:04:18,540 well, how many of these columns do we want to occupy? 80 00:04:18,540 --> 00:04:22,590 In this case, this div wants two of those columns 81 00:04:22,590 --> 00:04:25,320 and then this one wants four of them 82 00:04:25,320 --> 00:04:28,260 and then the final one wants six. 83 00:04:28,260 --> 00:04:31,890 Based on the classes that you choose, 84 00:04:31,890 --> 00:04:35,430 Bootstrap will know how much space to allocate each div 85 00:04:35,430 --> 00:04:37,680 on a percentage basis. 86 00:04:37,680 --> 00:04:41,280 So you could view the col-6 as a 50% 87 00:04:41,280 --> 00:04:45,120 and the col-2 as 1/6 of the entire width 88 00:04:45,120 --> 00:04:46,560 and so on and so forth. 89 00:04:46,560 --> 00:04:48,600 So you can use all of the numbers, 90 00:04:48,600 --> 00:04:51,330 col-1 all the way up to col-12, 91 00:04:51,330 --> 00:04:54,960 and you can split up the proportion of your screen 92 00:04:54,960 --> 00:04:56,670 and the content inside. 93 00:04:56,670 --> 00:05:01,140 So maybe you would have a navigation section on the left 94 00:05:01,140 --> 00:05:04,890 that you only want to take up 2 out of 12 width, 95 00:05:04,890 --> 00:05:06,690 and then the main content here 96 00:05:06,690 --> 00:05:10,170 maybe could take up 10 out of 12 of the width 97 00:05:10,170 --> 00:05:11,490 and so on and so forth. 98 00:05:11,490 --> 00:05:13,050 And this is a really, really easy 99 00:05:13,050 --> 00:05:18,050 and intuitive way of sizing your content using Bootstrap. 100 00:05:18,180 --> 00:05:20,190 And this is what the code would look like. 101 00:05:20,190 --> 00:05:21,720 So we have three divs 102 00:05:21,720 --> 00:05:23,730 and we're giving this one 2 out of 12, 103 00:05:23,730 --> 00:05:25,650 4 out 12, 6 out of 12. 104 00:05:25,650 --> 00:05:28,770 And this is the layout that we end up with. 105 00:05:28,770 --> 00:05:31,110 And we didn't have to write any CSS. 106 00:05:31,110 --> 00:05:34,890 All we had to do was add in the prebuilt layout classes. 107 00:05:34,890 --> 00:05:38,010 Again, it's really important to know that Bootstrap 108 00:05:38,010 --> 00:05:40,650 has predefined breakpoints 109 00:05:40,650 --> 00:05:42,900 and these dimensions are defined 110 00:05:42,900 --> 00:05:45,660 based on common screen sizes. 111 00:05:45,660 --> 00:05:48,600 And even though these numbers are constantly changing, 112 00:05:48,600 --> 00:05:52,473 generally, I would say that small is for mobile devices, 113 00:05:53,310 --> 00:05:56,970 medium is for tablets and iPads, 114 00:05:56,970 --> 00:05:59,283 large is for laptop, 115 00:06:00,240 --> 00:06:02,850 extra large is for desktop, 116 00:06:02,850 --> 00:06:05,700 and extra, extra large is for anything crazy 117 00:06:05,700 --> 00:06:07,680 like maybe a TV or something. 118 00:06:07,680 --> 00:06:09,780 And extra small is for devices 119 00:06:09,780 --> 00:06:11,940 that are maybe longer than they are wide, 120 00:06:11,940 --> 00:06:13,380 so maybe foldable phones 121 00:06:13,380 --> 00:06:17,040 and even really narrow phone screens. 122 00:06:17,040 --> 00:06:19,500 Now, one thing I want to draw your attention to 123 00:06:19,500 --> 00:06:24,450 is the directionality of the signs here. 124 00:06:24,450 --> 00:06:26,220 All of these breakpoints, 125 00:06:26,220 --> 00:06:30,440 which we'll often use, for example, col-sm-2, 126 00:06:32,040 --> 00:06:36,690 this section refers to the screens 127 00:06:36,690 --> 00:06:40,650 which are greater than this dimension. 128 00:06:40,650 --> 00:06:43,170 So that means the small breakpoint 129 00:06:43,170 --> 00:06:46,470 is between here and here, 130 00:06:46,470 --> 00:06:51,300 and covers the range between 576 and 768 131 00:06:51,300 --> 00:06:53,610 and each of them always go up. 132 00:06:53,610 --> 00:06:55,620 So this is an important point to keep in mind 133 00:06:55,620 --> 00:06:58,770 when you're dealing with the Bootstrap breakpoints. 134 00:06:58,770 --> 00:07:01,140 Now, one of the great things about Bootstrap breakpoints 135 00:07:01,140 --> 00:07:04,620 is we don't really need the media queries as much 136 00:07:04,620 --> 00:07:07,470 because this covers pretty much a lot 137 00:07:07,470 --> 00:07:09,600 of the different device dimensions 138 00:07:09,600 --> 00:07:12,600 and we don't have to manually write all the pixel sizes 139 00:07:12,600 --> 00:07:15,300 and add media queries into our CSS. 140 00:07:15,300 --> 00:07:17,190 We can target the different sizes 141 00:07:17,190 --> 00:07:19,290 and make our website responsive 142 00:07:19,290 --> 00:07:21,693 by using the prebuilt breakpoints. 143 00:07:22,590 --> 00:07:25,890 Here's an example of the Bootstrap breakpoints. 144 00:07:25,890 --> 00:07:30,890 Here we're saying that on a small screen and above, 145 00:07:30,990 --> 00:07:35,990 we want the dimension ratio to be two, four, and six. 146 00:07:36,060 --> 00:07:39,270 So this means that on desktop, on laptop, on TV, 147 00:07:39,270 --> 00:07:42,930 it's all going to have this size and even on mobile as well. 148 00:07:42,930 --> 00:07:45,510 But below the size of mobile, 149 00:07:45,510 --> 00:07:49,920 it is not defined as having these proportions. 150 00:07:49,920 --> 00:07:54,920 So it will default to giving each of these divs 100%. 151 00:07:55,500 --> 00:07:58,110 And similarly, if you don't add a number here, 152 00:07:58,110 --> 00:08:01,590 so we could for example here, it's 12 columns, 153 00:08:01,590 --> 00:08:02,580 12 divided by 3. 154 00:08:02,580 --> 00:08:05,310 So these are actually col-sm-4. 155 00:08:05,310 --> 00:08:07,290 But if we don't define a number, 156 00:08:07,290 --> 00:08:10,323 you remember that they will automatically distribute. 157 00:08:12,450 --> 00:08:13,920 But what would it look like 158 00:08:13,920 --> 00:08:18,240 if we reduce the screen size to less than a mobile size? 159 00:08:18,240 --> 00:08:22,470 Well, all of these divs will go to 100% width. 160 00:08:22,470 --> 00:08:26,550 When the overall width is less than 576, 161 00:08:26,550 --> 00:08:29,280 then all of these items default to 162 00:08:29,280 --> 00:08:32,820 as if they just had column defined. 163 00:08:32,820 --> 00:08:37,380 So col as the class, and the col class by default 164 00:08:37,380 --> 00:08:40,890 is going to take up 100% of the width 165 00:08:40,890 --> 00:08:43,380 in the small size screen. 166 00:08:43,380 --> 00:08:45,210 Now, in a single div, 167 00:08:45,210 --> 00:08:48,660 you can actually also have multiple breakpoints. 168 00:08:48,660 --> 00:08:50,520 So in this case, what it's saying 169 00:08:50,520 --> 00:08:55,520 is on the large devices and above, 170 00:08:56,400 --> 00:09:01,400 then it should take up 4 out of 12 of the width, 171 00:09:01,410 --> 00:09:04,680 on medium sizes and above, 172 00:09:04,680 --> 00:09:06,630 well, because the above is already defined, 173 00:09:06,630 --> 00:09:09,780 so then this case is only on medium devices, 174 00:09:09,780 --> 00:09:13,710 then it should take up 8 out of 12 of the width. 175 00:09:13,710 --> 00:09:17,700 And on small devices, it should take up 12 out of 12. 176 00:09:17,700 --> 00:09:19,710 So full width. 177 00:09:19,710 --> 00:09:22,950 Here, we're simulating a large screen 178 00:09:22,950 --> 00:09:25,440 so maybe on a laptop or a desktop, 179 00:09:25,440 --> 00:09:28,740 then it's taking up 4 out of 12, 180 00:09:28,740 --> 00:09:31,080 it's this kind of proportion. 181 00:09:31,080 --> 00:09:34,470 And then we go over to the next size down, 182 00:09:34,470 --> 00:09:38,880 say on an iPad, then it's going to take up 8 out of 12 183 00:09:38,880 --> 00:09:40,260 of the screen. 184 00:09:40,260 --> 00:09:43,530 And just for example sakes, let's go down even further 185 00:09:43,530 --> 00:09:47,700 to a mobile size where we want it to take up 100% 186 00:09:47,700 --> 00:09:50,040 or full width of the screen. 187 00:09:50,040 --> 00:09:51,180 Because as you imagine, 188 00:09:51,180 --> 00:09:53,280 when we have more screen real estate, 189 00:09:53,280 --> 00:09:55,290 it's easier to see things. 190 00:09:55,290 --> 00:09:57,120 And when we're working on smaller screens, 191 00:09:57,120 --> 00:09:59,910 we want to make things generally a bit larger 192 00:09:59,910 --> 00:10:03,093 so that it's easier for users to see our content. 193 00:10:03,930 --> 00:10:07,470 In addition to having multiple breakpoints in each div, 194 00:10:07,470 --> 00:10:10,680 you can also mix and match the types of definition. 195 00:10:10,680 --> 00:10:14,130 So for example, here we've got two size columns, 196 00:10:14,130 --> 00:10:16,170 col-2 and col-4. 197 00:10:16,170 --> 00:10:19,650 So it's always going to take up 2 out of 12, this section, 198 00:10:19,650 --> 00:10:21,720 4 out of 12 here. 199 00:10:21,720 --> 00:10:22,770 But this last one, 200 00:10:22,770 --> 00:10:25,800 notice how we've just left it as the column class. 201 00:10:25,800 --> 00:10:26,633 Now this means 202 00:10:26,633 --> 00:10:29,430 that it's going to automatically adjust in size 203 00:10:29,430 --> 00:10:32,343 in order to take up whatever proportion remains. 204 00:10:33,210 --> 00:10:37,080 Bootstrap layout is a little bit complicated 205 00:10:37,080 --> 00:10:39,090 when you're first working with it 206 00:10:39,090 --> 00:10:41,820 and it's really important that you read the docs 207 00:10:41,820 --> 00:10:44,460 and also have plenty of practice 208 00:10:44,460 --> 00:10:47,040 before things start to make more sense. 209 00:10:47,040 --> 00:10:49,920 So in order for you to practice, I've created a website 210 00:10:49,920 --> 00:10:54,920 at appbrewery.github.io/bootstrap-layout. 211 00:10:55,320 --> 00:10:56,760 And if you go to this website, 212 00:10:56,760 --> 00:11:00,690 you'll see that I've got three exercises in total for you. 213 00:11:00,690 --> 00:11:03,570 The idea of the exercises is that at the top, 214 00:11:03,570 --> 00:11:05,940 there will be a demo area 215 00:11:05,940 --> 00:11:08,970 which is the effect that you're trying to achieve. 216 00:11:08,970 --> 00:11:11,820 For example, in this case, we want these divs 217 00:11:11,820 --> 00:11:15,300 to be 50% on desktop and 100% on mobile. 218 00:11:15,300 --> 00:11:18,180 So as I reduce the width, 219 00:11:18,180 --> 00:11:21,390 you'll see that it gets to a point 220 00:11:21,390 --> 00:11:24,030 where we reach that sm breakpoint 221 00:11:24,030 --> 00:11:27,840 where it goes into 100% width. 222 00:11:27,840 --> 00:11:31,170 As you scroll down, each of the different exercises 223 00:11:31,170 --> 00:11:33,300 will have different proportions. 224 00:11:33,300 --> 00:11:34,920 And what you want to do 225 00:11:34,920 --> 00:11:38,730 is to modify the HTML code inside here, 226 00:11:38,730 --> 00:11:41,190 which is responsible for the styling 227 00:11:41,190 --> 00:11:42,900 of the area that you control 228 00:11:42,900 --> 00:11:45,570 which are the divs underneath the examples. 229 00:11:45,570 --> 00:11:48,000 And I want you to add the classes 230 00:11:48,000 --> 00:11:50,430 using the 12 column layout system 231 00:11:50,430 --> 00:11:55,430 so that your area behaves exactly the same as the top area 232 00:11:55,890 --> 00:11:57,870 when you reduce the size 233 00:11:57,870 --> 00:12:01,020 and hit the various different breakpoints. 234 00:12:01,020 --> 00:12:04,170 If you get stuck, be sure to check out the layout section 235 00:12:04,170 --> 00:12:07,050 of the Bootstrap documentation. 236 00:12:07,050 --> 00:12:10,860 And here you'll see the different Bootstrap breakpoints. 237 00:12:10,860 --> 00:12:15,600 Also, you can read up more on how the columns work, 238 00:12:15,600 --> 00:12:20,600 how the containers work, and how the grid system works. 239 00:12:20,670 --> 00:12:23,493 Pause the video now and give this challenge a go. 240 00:12:26,550 --> 00:12:28,200 So hopefully, you've given this a go 241 00:12:28,200 --> 00:12:31,110 and you manage to get everything to work correctly. 242 00:12:31,110 --> 00:12:33,540 Let's go through the solution together. 243 00:12:33,540 --> 00:12:36,690 The first example says it should be 50% on desktop 244 00:12:36,690 --> 00:12:38,820 and 100% on mobile. 245 00:12:38,820 --> 00:12:41,790 We know that the desktop breakpoint is the xl, 246 00:12:41,790 --> 00:12:46,790 so we can define column-xl-6, 247 00:12:47,040 --> 00:12:50,910 and 6 out of 12 is of course 50%. 248 00:12:50,910 --> 00:12:53,550 Now, in order to get it to be 100% on mobile, 249 00:12:53,550 --> 00:12:58,550 we could say col-sm-12, which is 100%, 250 00:12:59,190 --> 00:13:01,440 and we can add that to both divs. 251 00:13:01,440 --> 00:13:03,780 Now if I go ahead and set apply changes, 252 00:13:03,780 --> 00:13:07,140 you can see now when I reduce the width of the window, 253 00:13:07,140 --> 00:13:10,200 that it's going to hit that breakpoint 254 00:13:10,200 --> 00:13:13,530 where below which it's no longer going to be 50% 255 00:13:13,530 --> 00:13:17,643 and it's going to start taking up the full width. 256 00:13:18,870 --> 00:13:20,730 Now you might remember from previously 257 00:13:20,730 --> 00:13:23,490 we said that the Bootstrap breakpoints 258 00:13:23,490 --> 00:13:27,600 target sizes this particular size and above. 259 00:13:27,600 --> 00:13:30,120 So when we define column-xl-6, 260 00:13:30,120 --> 00:13:34,500 we're saying anything that's above the xl breakpoint, 261 00:13:34,500 --> 00:13:39,330 which is greater than 1,200 pixels, should be 50%. 262 00:13:39,330 --> 00:13:40,530 You might have realized 263 00:13:40,530 --> 00:13:42,630 that you don't actually need to define this 264 00:13:42,630 --> 00:13:46,020 because everything else is going to default to 100%. 265 00:13:46,020 --> 00:13:47,760 So if I apply changes, again, 266 00:13:47,760 --> 00:13:50,730 you can see that my purple example still behaves the same 267 00:13:50,730 --> 00:13:54,150 as the green example, and I've only changed the behavior 268 00:13:54,150 --> 00:13:58,830 of the xl size and above and changed its layout. 269 00:13:58,830 --> 00:14:02,340 All right, so let's go to exercise number two. 270 00:14:02,340 --> 00:14:05,160 And in this case, I haven't given you here exactly 271 00:14:05,160 --> 00:14:07,470 what they should do or how they should behave. 272 00:14:07,470 --> 00:14:10,200 And instead, I wanted you to simply just reduce 273 00:14:10,200 --> 00:14:13,830 the width of the screen to see how it changes 274 00:14:13,830 --> 00:14:15,990 through the different sizes. 275 00:14:15,990 --> 00:14:17,130 The first one's easy. 276 00:14:17,130 --> 00:14:19,560 Pretty much all of the larger sizes, 277 00:14:19,560 --> 00:14:21,750 all the way down to the large breakpoint, 278 00:14:21,750 --> 00:14:24,360 takes up the full 12 width column. 279 00:14:24,360 --> 00:14:25,380 And you can take out a ruler 280 00:14:25,380 --> 00:14:26,580 if you want to measure the screen, 281 00:14:26,580 --> 00:14:28,080 but we can see that column 1 282 00:14:28,080 --> 00:14:30,930 is roughly half of the width of the row. 283 00:14:30,930 --> 00:14:34,050 Column 2 and 3 are pretty much equal size 284 00:14:34,050 --> 00:14:37,500 so it's probably going to be six, three, and three. 285 00:14:37,500 --> 00:14:38,880 Let's modify this 286 00:14:38,880 --> 00:14:42,030 so that we target the large breakpoint first. 287 00:14:42,030 --> 00:14:45,810 So we'll say col-lg-6 288 00:14:45,810 --> 00:14:47,730 for the first column. 289 00:14:47,730 --> 00:14:51,930 The second column is going to be col-lg-3, 290 00:14:51,930 --> 00:14:54,960 and the same for the third column. 291 00:14:54,960 --> 00:14:57,210 So now if I click Apply Changes, 292 00:14:57,210 --> 00:15:00,570 you can see it's now taking up the same proportions, 293 00:15:00,570 --> 00:15:03,030 but when we hit this breakpoint 294 00:15:03,030 --> 00:15:05,520 that's below the large breakpoint, 295 00:15:05,520 --> 00:15:08,550 our columns, by default, go to 100% 296 00:15:08,550 --> 00:15:11,610 whereas the example actually does something different. 297 00:15:11,610 --> 00:15:13,560 The top column takes up 100% 298 00:15:13,560 --> 00:15:16,650 and the other two take up half of the width. 299 00:15:16,650 --> 00:15:18,510 And you can see that behavior continues 300 00:15:18,510 --> 00:15:21,390 all the way until the very small size. 301 00:15:21,390 --> 00:15:24,960 So that means that we've got an sm breakpoint there defined. 302 00:15:24,960 --> 00:15:27,270 Now once you work with this for a long time, 303 00:15:27,270 --> 00:15:30,480 you can spot each of the breakpoints pretty much by eye. 304 00:15:30,480 --> 00:15:32,850 But initially, you can always just switch around, 305 00:15:32,850 --> 00:15:35,640 try different ones, try the sm, try the xl, 306 00:15:35,640 --> 00:15:39,060 and see which ones actually behave like the example. 307 00:15:39,060 --> 00:15:41,550 There's nothing wrong with trial and error. 308 00:15:41,550 --> 00:15:44,130 When it hits the smaller screen size, 309 00:15:44,130 --> 00:15:48,750 our column 1 is going to take up the full width of the row 310 00:15:48,750 --> 00:15:51,630 and then the other two on the smaller breakpoint 311 00:15:51,630 --> 00:15:54,090 are going to take up half of the width. 312 00:15:54,090 --> 00:15:55,893 So col-sm-6. 313 00:15:56,730 --> 00:15:59,520 And similarly, the third one does the same thing. 314 00:15:59,520 --> 00:16:01,170 So let's apply the change. 315 00:16:01,170 --> 00:16:03,090 And you can see now at this breakpoint, 316 00:16:03,090 --> 00:16:05,730 they also behave exactly the same. 317 00:16:05,730 --> 00:16:09,210 So now all we have left is the final one 318 00:16:09,210 --> 00:16:12,720 which is just the smallest breakpoint for the columns. 319 00:16:12,720 --> 00:16:14,940 And here, what's actually happening 320 00:16:14,940 --> 00:16:18,480 is each of these columns are taking up 10 out of 12 321 00:16:18,480 --> 00:16:19,770 of the columns. 322 00:16:19,770 --> 00:16:21,060 Now I can spot that by eye 323 00:16:21,060 --> 00:16:23,850 but also I created this exercise so I know. 324 00:16:23,850 --> 00:16:25,530 But if you try some different numbers, 325 00:16:25,530 --> 00:16:26,850 you'll probably get there as well. 326 00:16:26,850 --> 00:16:31,800 So if we define the smallest size as column, 327 00:16:31,800 --> 00:16:34,410 let's just try an 8 to start with 328 00:16:34,410 --> 00:16:37,530 so I can show you this trial and error process. 329 00:16:37,530 --> 00:16:39,540 And we know that all the columns behave the same 330 00:16:39,540 --> 00:16:40,920 at that breakpoint. 331 00:16:40,920 --> 00:16:43,290 If we click Apply Changes and we go here, 332 00:16:43,290 --> 00:16:45,810 we can see, well, 8 is clearly too small 333 00:16:45,810 --> 00:16:50,810 so let's go up a size and let's change to 10 out of 12. 334 00:16:50,970 --> 00:16:53,370 And once I hit Apply Changes, 335 00:16:53,370 --> 00:16:57,150 you can see we now have both sets of columns 336 00:16:57,150 --> 00:17:00,810 behaving exactly the same at all the different breakpoints. 337 00:17:00,810 --> 00:17:03,420 This one was a little bit harder admittedly 338 00:17:03,420 --> 00:17:05,339 and it required a little bit more thinking 339 00:17:05,339 --> 00:17:07,500 and probably trial and error on your part, 340 00:17:07,500 --> 00:17:09,270 but hopefully, by the end of it, 341 00:17:09,270 --> 00:17:10,770 you would understand a bit better 342 00:17:10,770 --> 00:17:13,619 about how these different breakpoints work 343 00:17:13,619 --> 00:17:15,510 and at which points they hit. 344 00:17:15,510 --> 00:17:17,369 So now for the final exercise, 345 00:17:17,369 --> 00:17:20,280 and this one we've got two columns. 346 00:17:20,280 --> 00:17:22,920 Initially, they start out in one line 347 00:17:22,920 --> 00:17:26,280 taking up a particular proportion, 348 00:17:26,280 --> 00:17:29,370 and then we hit a certain breakpoint 349 00:17:29,370 --> 00:17:32,160 and it changes the proportion. 350 00:17:32,160 --> 00:17:35,190 Column 1 gets a little bit wider, 351 00:17:35,190 --> 00:17:37,890 takes up more space compared to column 2. 352 00:17:37,890 --> 00:17:39,600 And then if we reduce a little bit more, 353 00:17:39,600 --> 00:17:42,480 that changes again at the next breakpoint. 354 00:17:42,480 --> 00:17:46,830 And then again, and then finally, taking up full width. 355 00:17:46,830 --> 00:17:49,860 So let's start with the largest breakpoint we know, 356 00:17:49,860 --> 00:17:52,410 which is the xxl. 357 00:17:52,410 --> 00:17:56,370 Let's say that col-xxl 358 00:17:56,370 --> 00:18:00,000 and let's define it as 1 out of 12 359 00:18:00,000 --> 00:18:05,000 and then give the other half, 12 minus 1 is 11, 360 00:18:05,280 --> 00:18:06,900 and now let's apply the change. 361 00:18:06,900 --> 00:18:10,140 And you can see that is the correct proportion. 362 00:18:10,140 --> 00:18:12,780 Again, this might require trial and error on your part. 363 00:18:12,780 --> 00:18:14,070 Don't be too hard on yourself 364 00:18:14,070 --> 00:18:15,930 if you didn't manage to get it first time. 365 00:18:15,930 --> 00:18:17,190 I wouldn't be able to either 366 00:18:17,190 --> 00:18:20,010 if it was somebody else's exercise like this. 367 00:18:20,010 --> 00:18:23,790 Now let's hit the next breakpoint just about here, 368 00:18:23,790 --> 00:18:26,640 and this is going to be the next breakpoint down, 369 00:18:26,640 --> 00:18:28,290 this is the xl. 370 00:18:28,290 --> 00:18:30,633 We've just hit 1,200. 371 00:18:31,890 --> 00:18:34,560 And a tip for working with responsiveness. 372 00:18:34,560 --> 00:18:36,450 When you're wondering, how do I know 373 00:18:36,450 --> 00:18:39,810 that it's the 1,200 pixel breakpoint that got hit? 374 00:18:39,810 --> 00:18:42,390 If you go into the Chrome developer tools 375 00:18:42,390 --> 00:18:46,410 and click on this button to toggle the device toolbar 376 00:18:46,410 --> 00:18:49,620 and change the dimensions to responsive, 377 00:18:49,620 --> 00:18:54,060 then you can click this drag bar and look at the top here. 378 00:18:54,060 --> 00:18:57,300 This is the important width that we need to look at. 379 00:18:57,300 --> 00:19:00,630 Once I expand it to 1,200, 380 00:19:00,630 --> 00:19:04,320 you can see that jump in size happen just around there. 381 00:19:04,320 --> 00:19:09,320 So we know that the 1,200 breakpoint is the xl breakpoint, 382 00:19:09,750 --> 00:19:12,210 and you can work this out this way as well. 383 00:19:12,210 --> 00:19:14,040 So just a tip for the future 384 00:19:14,040 --> 00:19:16,260 when you're working with any kind of responsiveness. 385 00:19:16,260 --> 00:19:18,090 This is really useful to know. 386 00:19:18,090 --> 00:19:20,370 But most of the time, I would judge responsiveness 387 00:19:20,370 --> 00:19:22,590 just by eye when you're designing the layout 388 00:19:22,590 --> 00:19:24,990 to see what looks good. 389 00:19:24,990 --> 00:19:27,210 All right, so let's hit the next breakpoint 390 00:19:27,210 --> 00:19:30,960 at the xl size 1,200 pixels. 391 00:19:30,960 --> 00:19:33,120 So this is col-xl 392 00:19:33,120 --> 00:19:36,810 and I reckon this is a ratio of 2 to 10. 393 00:19:36,810 --> 00:19:40,950 So let's do col-xl-2, col-xl-10. 394 00:19:40,950 --> 00:19:42,720 Let's apply our changes. 395 00:19:42,720 --> 00:19:44,520 And that's pretty good. 396 00:19:44,520 --> 00:19:48,600 So now let's keep reducing until we hit the next breakpoint. 397 00:19:48,600 --> 00:19:52,050 And this is going to be the next level down 398 00:19:52,050 --> 00:19:54,690 which is large, lg, 399 00:19:54,690 --> 00:19:58,140 and I reckon this is probably 4 to 8. 400 00:19:58,140 --> 00:20:02,130 So col-lg-4 401 00:20:02,130 --> 00:20:06,810 and the next one will be col-lg-8. 402 00:20:06,810 --> 00:20:09,840 And notice that each of these always add up to 12 403 00:20:09,840 --> 00:20:11,670 because you can see in the example layout, 404 00:20:11,670 --> 00:20:13,800 they're only taking up one row. 405 00:20:13,800 --> 00:20:16,920 If it didn't add up to 12, then it will go to the next row 406 00:20:16,920 --> 00:20:20,160 in order to take up the amount of space that we specified. 407 00:20:20,160 --> 00:20:23,730 Now we have the next breakpoint, which is the col-md. 408 00:20:23,730 --> 00:20:26,640 And this one's easy to spot because it's half-half 409 00:20:26,640 --> 00:20:28,890 so it's going to be six. 410 00:20:28,890 --> 00:20:33,390 And finally, we have the rest by default 411 00:20:33,390 --> 00:20:35,100 going to take up 100%. 412 00:20:35,100 --> 00:20:36,810 So you could define the sm, 413 00:20:36,810 --> 00:20:38,400 but that's also the default behavior. 414 00:20:38,400 --> 00:20:40,260 So you could also leave it out. 415 00:20:40,260 --> 00:20:41,093 There you have it. 416 00:20:41,093 --> 00:20:42,900 That's the final solution code 417 00:20:42,900 --> 00:20:46,980 for exercise three and exercise two 418 00:20:46,980 --> 00:20:48,660 and exercise one. 419 00:20:48,660 --> 00:20:50,460 Hopefully, you managed to get there in the end 420 00:20:50,460 --> 00:20:52,440 even if there was a little bit of trial and error 421 00:20:52,440 --> 00:20:54,030 and some difficulty. 422 00:20:54,030 --> 00:20:56,640 But once you've used Bootstrap layout a few times, 423 00:20:56,640 --> 00:20:58,470 you'll get used to this idea. 424 00:20:58,470 --> 00:21:01,740 And it's a really intuitive way to layout our screen 425 00:21:01,740 --> 00:21:03,930 and it's really easy to manipulate 426 00:21:03,930 --> 00:21:06,990 and to create different layout designs. 427 00:21:06,990 --> 00:21:08,730 Now in the next lesson, we're going to be talking 428 00:21:08,730 --> 00:21:11,310 through the different Bootstrap components. 429 00:21:11,310 --> 00:21:14,247 So for all of that and more, I'll see you there.