1 00:00:05,520 --> 00:00:10,560 Welcome back, everyone, to this last lecture on Bootstrap, which is going to cover the grid system. 2 00:00:11,810 --> 00:00:17,720 Now, Bootstrap uses a layout convention based on containers and a grid system that allow you to organize 3 00:00:17,720 --> 00:00:20,090 or each to mail components based on rows and columns. 4 00:00:20,330 --> 00:00:24,980 And it also allows you to easily automatically resize your web page for smaller or larger screens. 5 00:00:26,410 --> 00:00:30,910 Now, we should note when you're actually using bootstrap, whether it's the grid system or any other 6 00:00:30,910 --> 00:00:35,470 bootstrap component, you're typically going to put everything within a container class. 7 00:00:35,680 --> 00:00:39,880 And from there, it's actually further separated out into rows and columns. 8 00:00:40,270 --> 00:00:43,660 And using these rows and columns, you end up creating a grid. 9 00:00:44,290 --> 00:00:50,410 Now, Bootstrap does allow you to specifically dictate how to resize for certain screen sizes extra 10 00:00:50,410 --> 00:00:56,410 small, small, medium, large and extra large screen sizes, which are defined by the number of pixels 11 00:00:56,710 --> 00:00:57,250 wide. 12 00:00:57,280 --> 00:00:58,540 The screen actually is. 13 00:00:58,960 --> 00:01:02,140 Or you could also let bootstrap automatically resize for you. 14 00:01:02,620 --> 00:01:07,210 We should note that for the rest of this course, we're not going to stress too much about having the 15 00:01:07,210 --> 00:01:11,740 web pages render perfectly on a mobile screen and a desktop screen. 16 00:01:11,980 --> 00:01:16,960 We'll go ahead and leave that up to you when you actually launch your real projects using Django and 17 00:01:16,960 --> 00:01:18,730 Bootstrap as a frontend framework. 18 00:01:19,060 --> 00:01:23,890 Here we're just going to cover the very basics of the grid options so you can have a basic understanding 19 00:01:23,890 --> 00:01:24,550 of how it works. 20 00:01:26,040 --> 00:01:26,430 All right. 21 00:01:26,460 --> 00:01:32,520 So what actually happens on different screen sizes when your website is using the bootstrap framework? 22 00:01:33,850 --> 00:01:39,910 Bootstrap comes up with his really clever idea, based off Flexbox to split up the entire screen into 23 00:01:39,910 --> 00:01:41,680 12 available columns. 24 00:01:42,130 --> 00:01:48,640 So you can imagine that if you have 12 available columns, you can put a piece of content over across 25 00:01:48,640 --> 00:01:54,190 12 columns and you can actually use any combination of numbers that eventually add up to 12 columns. 26 00:01:54,490 --> 00:01:59,870 If you wanted certain portions of the components to be wider on the screen, you could just have to 27 00:01:59,870 --> 00:02:01,630 take up more of the available columns. 28 00:02:01,900 --> 00:02:07,300 And as long as the total sum along any of these rows is equal to 12, then you're OK. 29 00:02:07,630 --> 00:02:10,030 So you can have all 12 basic available columns. 30 00:02:10,030 --> 00:02:14,560 So that could be you can imagine, like 12 different buttons across the screen as long as the screen 31 00:02:14,560 --> 00:02:15,130 is wide enough. 32 00:02:15,400 --> 00:02:20,320 Or you could do six by two, four by three, three by four, two by six, etc. And depending on how 33 00:02:20,320 --> 00:02:25,930 you define this bootstrap, can actually automatically resize this and push things down to another row 34 00:02:26,080 --> 00:02:27,940 in case there's not enough room on the screen. 35 00:02:29,290 --> 00:02:34,330 Now, the grid system, what it does is it actually makes use of a class called row as well as a class 36 00:02:34,330 --> 00:02:36,870 called column in order to do this sort of structure. 37 00:02:36,880 --> 00:02:42,100 So it feels a lot almost like you're defining an HTML table, except you're actually just creating these 38 00:02:42,100 --> 00:02:45,760 little mini divisions, defining a column and an available row. 39 00:02:47,510 --> 00:02:53,600 Now, if you actually want to specifically tell Bootstrap to resize on a certain size screen and bootstrap 40 00:02:53,600 --> 00:03:00,200 actually has size screens defined by pixel width, then the following format you would use is the column 41 00:03:00,200 --> 00:03:02,960 that screen size the number of columns. 42 00:03:03,230 --> 00:03:07,160 So that could be something like call that small, smaller call dashed medium, etc.. 43 00:03:08,830 --> 00:03:14,890 For example, column that medium screen use six columns, essentially use half of the columns available. 44 00:03:16,470 --> 00:03:20,040 So we can define how the column should be shown when the screen gets resized. 45 00:03:20,430 --> 00:03:22,410 Let me get started with some very simple examples. 46 00:03:22,440 --> 00:03:26,310 Again, don't stress about this too much because for the rest of the course, we're not really going 47 00:03:26,310 --> 00:03:30,450 to be able to show you what the screens look like on a mobile device. 48 00:03:30,540 --> 00:03:35,640 Instead, think about this when you're actually going to launch your site and if you expect people to 49 00:03:35,640 --> 00:03:39,090 visit your site both on a tablet, phone and desktop computer. 50 00:03:39,600 --> 00:03:39,870 OK. 51 00:03:39,900 --> 00:03:41,310 Let's head over to our code editor. 52 00:03:43,560 --> 00:03:46,320 All right, so here I am inside a visual studio code. 53 00:03:46,590 --> 00:03:51,970 I've already linked up CSS and JavaScript for bootstrap, as well as my own style sheet. 54 00:03:51,990 --> 00:03:53,250 We will be using that later on. 55 00:03:53,550 --> 00:03:56,580 And then when I want to generate the life preview, I have that button ready to go. 56 00:03:57,030 --> 00:03:59,670 First, let's check out the documentation on Bootstrap. 57 00:04:00,180 --> 00:04:06,450 So if you check out the Get Bootstrap documentation, the section we're looking at is called the layout 58 00:04:06,450 --> 00:04:06,990 section. 59 00:04:07,000 --> 00:04:11,970 And specifically, we're really talking about grid, where they show you this great example. 60 00:04:12,210 --> 00:04:13,920 But there's a whole philosophy here. 61 00:04:13,920 --> 00:04:20,160 Around break points and break points is just the idea of when the screen starts getting too small. 62 00:04:20,399 --> 00:04:27,420 I want the system to break down and instead of having multiple columns break down into multiple rows 63 00:04:27,720 --> 00:04:29,310 and we'll show you what that means later on. 64 00:04:29,640 --> 00:04:34,830 But the idea in general, is that you're going to have different sized screens that have dimensions 65 00:04:34,830 --> 00:04:35,730 based off pixels. 66 00:04:36,000 --> 00:04:41,100 So there's extra small screens, small screens, medium large, extra large and extra extra large screens. 67 00:04:41,490 --> 00:04:46,350 As a quick note, the monitor that I'm filming this on is a relatively large screen. 68 00:04:46,380 --> 00:04:49,350 It's somewhere around extra large to extra extra large. 69 00:04:49,650 --> 00:04:55,110 But I should also point out I'm pretty zoomed in when I'm actually recording these videos. 70 00:04:55,350 --> 00:05:00,180 So you're going to see me zoom in and out quite a bit during this particular recording just to show 71 00:05:00,180 --> 00:05:06,060 you the effects of things, resizing and the specific effects of specifying a break point. 72 00:05:06,840 --> 00:05:10,830 Now, really, the part that we should be concerned about are containers. 73 00:05:10,830 --> 00:05:17,820 Ingrid's containers are this idea that you can set everything within a default container that is going 74 00:05:17,820 --> 00:05:19,740 to allow you to have some extra padding. 75 00:05:20,040 --> 00:05:25,170 If you recall, when we copied and pasted some examples, like, for instance, when we copied and pasted 76 00:05:25,410 --> 00:05:30,030 these button examples, they didn't have this nice spacing and that's because they weren't inside a 77 00:05:30,030 --> 00:05:30,570 container. 78 00:05:30,840 --> 00:05:37,320 So it's actually copy this button example one more time, and I'm going to paste that in here inside 79 00:05:37,320 --> 00:05:39,870 the body and then do a life preview recall. 80 00:05:39,870 --> 00:05:43,740 It didn't look as nice as it did and the bootstrap documentation. 81 00:05:44,010 --> 00:05:46,980 And that's because we didn't put it inside a container class div. 82 00:05:47,400 --> 00:05:49,920 So undo this and let's say div. 83 00:05:50,700 --> 00:05:55,290 And then inside this div, I'm going to say class is equal to. 84 00:05:56,730 --> 00:06:00,900 Container and then I'm going to replaced all those buttons there. 85 00:06:00,930 --> 00:06:06,030 And you can already see just by doing that, we've added a little bit of padding as well as the ability 86 00:06:06,030 --> 00:06:12,210 to quite nicely automatically resize things into a specific number of rows and columns. 87 00:06:12,450 --> 00:06:16,710 I should point out I am zoomed in, so you're not going to see the same effects on your computer unless 88 00:06:16,710 --> 00:06:19,140 we're zoomed up to 100 percent, both of us. 89 00:06:19,440 --> 00:06:23,520 So if I zoom out to 100 percent, it kind of looks something like this, but this might be too small 90 00:06:23,520 --> 00:06:24,480 for you to read my code. 91 00:06:24,720 --> 00:06:30,750 But just as an idea of how the resizing actually works and more importantly, the general padding that 92 00:06:30,750 --> 00:06:32,490 is given to you by the container class. 93 00:06:32,790 --> 00:06:36,960 So if I delete that container div and delete it right now, so delete these two lines of code. 94 00:06:37,260 --> 00:06:39,420 You'll notice there is no longer any padding there. 95 00:06:39,600 --> 00:06:41,610 So that's one part of the containers. 96 00:06:41,730 --> 00:06:45,870 It just has enough padding so that everything kind of looks nice and a little more spaced out. 97 00:06:46,170 --> 00:06:48,780 Again, these are stylistic decisions, so you may not want that. 98 00:06:48,780 --> 00:06:50,040 Look for your particular website. 99 00:06:50,340 --> 00:06:54,870 So there are some kind of costs of doing business with bootstrap as the fact that all kind of these 100 00:06:54,870 --> 00:06:56,760 bootstrap web sites start to look kind of similar. 101 00:06:57,270 --> 00:06:58,670 Now, don't come back here to get bootstrap. 102 00:06:58,680 --> 00:07:03,330 And again, I mentioned we're really just interested in the layout section here, and we already understand 103 00:07:03,330 --> 00:07:07,140 containers kind of give us this idea of a little bit of padding and organization. 104 00:07:07,350 --> 00:07:12,780 They are also responsive to the size of the screen, and then we have the grid system with columns and 105 00:07:12,780 --> 00:07:13,200 rows. 106 00:07:13,830 --> 00:07:20,220 So here we can see the grid options, and these essentially allow us to adapt across the different break 107 00:07:20,220 --> 00:07:21,630 points which were in the break. 108 00:07:21,630 --> 00:07:27,150 Points are when do I start resizing columns into rows based off the actual size of the screen? 109 00:07:27,570 --> 00:07:30,330 And you do have the ability to just do this automatically. 110 00:07:30,660 --> 00:07:35,370 In fact, I'm going to actually copy some of this code and we'll see what happens when we let it happen 111 00:07:35,370 --> 00:07:40,500 automatically versus when we're actually specific and dictate a particular breaking point. 112 00:07:40,800 --> 00:07:43,830 You notice that there's actually a class prefix for each of these. 113 00:07:43,830 --> 00:07:47,100 So small is the column dash and then some. 114 00:07:47,100 --> 00:07:49,470 For small, that's the actual class call. 115 00:07:49,710 --> 00:07:53,280 It puts the notation actually in csv notation, which is why it has that little dot there. 116 00:07:53,700 --> 00:07:56,520 But I'm going to copy and paste this example for the documentation. 117 00:07:57,420 --> 00:08:03,900 And what this is doing is it's actually showing you two items or essentially two columns, perreault 118 00:08:04,140 --> 00:08:05,920 and then you have three rows underneath. 119 00:08:05,940 --> 00:08:09,180 So these are all equal with and should all kind of automatically resize. 120 00:08:09,630 --> 00:08:10,620 So we're going to copy these. 121 00:08:12,290 --> 00:08:13,340 And I'm going to paste it. 122 00:08:14,090 --> 00:08:18,200 And let me just show you how this works right now, so I will zoom in a little bit and not worry too 123 00:08:18,200 --> 00:08:20,120 much about the life preview right now. 124 00:08:20,540 --> 00:08:22,460 Just want to zoom in and show you what's going on here. 125 00:08:23,360 --> 00:08:28,090 So what we've done is I've put everything inside a container class there. 126 00:08:28,100 --> 00:08:35,780 So at the very top, I have my container class div and then I have my rows and then I can put essentially 127 00:08:35,780 --> 00:08:40,820 as many columns they want in my rows, keeping in mind that there's, technically speaking, only 12 128 00:08:40,820 --> 00:08:41,659 columns available. 129 00:08:41,870 --> 00:08:46,910 So if I start trying to add more items than that, depending on my screen size, automatically get refitted 130 00:08:46,910 --> 00:08:48,810 into pushing that down into a new row. 131 00:08:48,830 --> 00:08:50,150 You'll see what I mean just a second. 132 00:08:50,450 --> 00:08:57,590 But here we have yet another row, and then there's divs here, four columns and then you can put whatever 133 00:08:57,590 --> 00:08:58,430 you want on these columns. 134 00:08:58,440 --> 00:09:03,980 These could be like form elements, components, just different text, etc. You may notice, though, 135 00:09:03,980 --> 00:09:09,980 if I do a life preview, it doesn't have that nice gray background or the nice border. 136 00:09:10,370 --> 00:09:16,760 What I will do is for each of these column classes, I will create an actual black border. 137 00:09:17,300 --> 00:09:24,350 So I'm going to go into my master CSV file and I'm going to create a new class called Extra just for 138 00:09:24,350 --> 00:09:25,370 kind of an extra border. 139 00:09:26,000 --> 00:09:27,290 And here we're going to say border. 140 00:09:28,340 --> 00:09:32,000 And I'm going to say it's, let's say, a typical border. 141 00:09:32,120 --> 00:09:39,050 It's solid and black, so I have created a class called Extra and now I'm just going to save that and 142 00:09:39,050 --> 00:09:41,830 I will attach it to the column classes. 143 00:09:41,840 --> 00:09:43,310 So we're going to say extra here. 144 00:09:43,610 --> 00:09:47,060 So we're every second call you put in call extra. 145 00:09:47,240 --> 00:09:48,920 That's just for visualization purposes. 146 00:09:49,100 --> 00:09:51,440 This kind has nothing to do with bootstrap itself. 147 00:09:52,820 --> 00:09:54,530 So we'll do that here as well. 148 00:09:55,700 --> 00:09:59,540 And this just helps me show you what's actually happening with the bootstrap. 149 00:09:59,810 --> 00:10:04,340 So now MS and then you can see here starting to stretch out, and even as the screen size gets bigger, 150 00:10:04,550 --> 00:10:07,280 you suddenly start hitting the padding of the container itself. 151 00:10:07,700 --> 00:10:12,800 So note what's happening here as it expands, there's also a container and essentially auto resizing 152 00:10:12,800 --> 00:10:16,130 the padding of those columns as well. 153 00:10:16,940 --> 00:10:20,480 Now, if I really zoom out, then you're really going to see the effects all zoom out quite a bit. 154 00:10:20,870 --> 00:10:26,900 You see here those two columns and you see the three columns and it's automatically being resized to 155 00:10:26,900 --> 00:10:27,410 the screen. 156 00:10:28,250 --> 00:10:30,920 OK, now what happens if I add in more columns? 157 00:10:30,950 --> 00:10:32,570 That's totally OK as well. 158 00:10:33,230 --> 00:10:34,850 We have up to 12 columns to work with. 159 00:10:34,880 --> 00:10:40,880 So what I could do is within one of these row divisions, you can kind of think of this as a table. 160 00:10:41,300 --> 00:10:46,190 I can add in more columns so I can copy this last step, which is also a column div. 161 00:10:46,670 --> 00:10:48,710 And let's add in a couple more here. 162 00:10:49,010 --> 00:10:55,190 So we're going to say this is now new one and we'll call this new to. 163 00:10:56,650 --> 00:11:02,650 Save those changes, and I'm going to zoom out again to see the effects so they can see here. 164 00:11:02,830 --> 00:11:09,910 I now have five columns available to us, but you would notice that as I add in more columns eventually, 165 00:11:09,910 --> 00:11:14,130 if I squeeze them down too much, I can actually push to a new row. 166 00:11:14,140 --> 00:11:19,060 So that's the auto resizing that bootstrap lets you have, and I'm going to zoom in just to make this 167 00:11:19,060 --> 00:11:20,050 effect even stronger. 168 00:11:20,440 --> 00:11:23,530 So again, I have most three original columns. 169 00:11:23,530 --> 00:11:24,690 I added two new ones. 170 00:11:24,700 --> 00:11:28,810 If I push them down too much, it will push them out into new rows. 171 00:11:30,320 --> 00:11:33,650 OK, so I have that idea of pushing out into new rows. 172 00:11:34,130 --> 00:11:39,230 The last thing I want to point out is you can actually be more specific of when you want the breakdowns 173 00:11:39,230 --> 00:11:40,340 to begin to occur. 174 00:11:40,550 --> 00:11:46,970 And for this, I'm going to go ahead and just deal with this top row of two to make it more obvious. 175 00:11:47,390 --> 00:11:51,860 So let's go ahead and grab the second row and delete all the items from it. 176 00:11:52,130 --> 00:11:53,180 So let's this division. 177 00:11:53,750 --> 00:11:54,530 Second row. 178 00:11:54,860 --> 00:11:56,660 Go ahead and delete that. 179 00:11:56,690 --> 00:11:58,280 Careful when it starts and stops. 180 00:11:58,910 --> 00:12:00,000 So I'll go ahead and delete that. 181 00:12:00,020 --> 00:12:02,750 So you just have one row. 182 00:12:03,650 --> 00:12:06,800 With two columns, and then we're going to experiment a little bit here. 183 00:12:07,340 --> 00:12:15,260 All right, so recall in the actual grid system, there's the ability to specify how many columns should 184 00:12:15,260 --> 00:12:18,080 be taken up on a particular screen sizes. 185 00:12:18,080 --> 00:12:22,700 So these are the breakpoint small, medium, large, extra large and extra extra large. 186 00:12:23,120 --> 00:12:28,610 And then after you decide that screen size for a breakpoint, you decide on that particular breakpoint, 187 00:12:28,850 --> 00:12:31,370 how many columns should be taken up by this component? 188 00:12:32,000 --> 00:12:37,040 So let me show you this effect here, and keep in mind, I'm kind of zoomed in right now, so I'm going 189 00:12:37,040 --> 00:12:40,760 to zoom out later once I've finished writing this code so you can read it and then you'll actually see 190 00:12:40,760 --> 00:12:41,150 the effect. 191 00:12:41,180 --> 00:12:45,410 So let me exit that document for the live preview and let me zoom in. 192 00:12:45,440 --> 00:12:47,330 So right now we just have call. 193 00:12:47,780 --> 00:12:53,660 If you just put call by itself, it's essentially going to resize all the components in that particular 194 00:12:53,660 --> 00:12:56,720 row to have equal number of columns available. 195 00:12:57,020 --> 00:13:04,820 But now what I'm going to do is I'm actually going to specify, let's say, on a small size screen or, 196 00:13:04,970 --> 00:13:06,200 yeah, small size screen should be fine. 197 00:13:06,560 --> 00:13:11,630 Let me say on a small size screen, I want this to only take up two of those columns. 198 00:13:11,960 --> 00:13:18,740 So this is only going to take up two out of the 12 columns, and then I want this component to take 199 00:13:18,740 --> 00:13:20,570 up the extra 10 columns. 200 00:13:20,580 --> 00:13:22,370 So that's going to be 10. 201 00:13:23,300 --> 00:13:24,530 Of those 12 columns. 202 00:13:24,980 --> 00:13:31,040 So now, because I actually specified small two and small 10, when it hits that break point of small, 203 00:13:31,340 --> 00:13:37,790 it's going to resize things to specifically be two out of 12 on this first one and 10 out of 12 on this 204 00:13:37,790 --> 00:13:38,240 next one. 205 00:13:38,600 --> 00:13:41,840 So now I want to zoom out here to try to get that side screen. 206 00:13:42,180 --> 00:13:43,940 Let's get the live preview. 207 00:13:44,330 --> 00:13:45,770 And you should notice this effect. 208 00:13:45,890 --> 00:13:49,760 So note here how this is only taking up two of those 12 columns. 209 00:13:50,060 --> 00:13:52,640 And now this section is a lot wider. 210 00:13:52,640 --> 00:14:00,050 It's taking up 10 out of 12 of those columns, and that means that if I delete these again, or let's 211 00:14:00,050 --> 00:14:02,570 actually now make them equal space, so I'm going to say six and six. 212 00:14:03,440 --> 00:14:07,730 So six and six there you saw that it when I didn't resize and I overflowed past 12. 213 00:14:08,030 --> 00:14:11,750 It will create a new row, but now you can see they're taking up the same space. 214 00:14:11,750 --> 00:14:15,620 So now I've specifically said six on both. 215 00:14:16,340 --> 00:14:18,470 So now they're both six out of 12 here. 216 00:14:18,830 --> 00:14:24,620 And again, this just works by you specifying the column, the breakpoint and then how many of those 217 00:14:24,620 --> 00:14:29,480 columns should they take on that particular breakpoint, which means you can then begin to stack these 218 00:14:29,480 --> 00:14:35,210 particular columns if you want to be hyper specific for certain screen sizes, what break points should 219 00:14:35,210 --> 00:14:35,660 be used? 220 00:14:35,930 --> 00:14:42,890 And you can always kind of rest easy knowing that if your screen gets super small and flows beyond the 221 00:14:42,890 --> 00:14:47,420 12 columns of availability, Bootstrap says, OK, I'm just going to push this out to in your row. 222 00:14:47,420 --> 00:14:50,290 So if I hyper zoom in here, then it's OK. 223 00:14:50,300 --> 00:14:54,320 I'm just going to push it out to a new row and notice when you push it out to a new row, it's going 224 00:14:54,320 --> 00:14:55,430 to kind of reset everything. 225 00:14:55,670 --> 00:15:01,610 And now this is going to end up taking the entire space, and you could keep adding more and more stipulations 226 00:15:01,610 --> 00:15:03,710 for like an extra small grid and that sort of thing. 227 00:15:03,990 --> 00:15:09,350 But I just want you to get familiar the idea that you use a container, you specify your rows and then 228 00:15:09,350 --> 00:15:11,940 you can specify the columns for our use cases. 229 00:15:11,960 --> 00:15:16,970 We're pretty much going to have everything be kind of auto resized for us and just something like this 230 00:15:16,970 --> 00:15:20,810 where we're just going to specify the columns and we're going to say, go ahead, bootstrap. 231 00:15:21,050 --> 00:15:24,920 You make everything equal a number of columns and resize as necessary. 232 00:15:25,220 --> 00:15:30,050 But later on, if you want to be more specific than that, you have the tools and documentation to follow 233 00:15:30,050 --> 00:15:30,530 along with. 234 00:15:30,800 --> 00:15:32,930 And there's plenty of examples here. 235 00:15:33,080 --> 00:15:37,940 We're pretty much just going to follow the auto layout examples where everything is essentially automatically 236 00:15:37,940 --> 00:15:41,480 resized for us and equal with so that's it for Bootstrap. 237 00:15:41,510 --> 00:15:42,560 I'll see you at the next lecture.