1 00:00:00,420 --> 00:00:02,460 And welcome back. 2 00:00:02,790 --> 00:00:07,140 We left off with our really quick website that we built using Bootstrap. 3 00:00:08,140 --> 00:00:14,320 But I want to show you one thing that I've kept from you, and that is the layout feature in Bootstrap. 4 00:00:15,190 --> 00:00:21,250 And this was the primary reason that Bouchareb was so popular, because layout was so difficult and 5 00:00:21,250 --> 00:00:28,420 we didn't have Xbox back in the day, Bootstrap allowed us to create very responsive websites using 6 00:00:28,660 --> 00:00:30,760 these ideas of columns. 7 00:00:31,850 --> 00:00:35,180 To show you what I mean, we're going to create our own column system. 8 00:00:36,160 --> 00:00:42,820 We're going to go back to our website and I'm going to delete everything that we created so far. 9 00:00:43,940 --> 00:00:51,050 And to save and refresh, everything's empty, so in bootstrap, you can do something like this, you 10 00:00:51,050 --> 00:00:55,520 always want to wrap everything in a container and again, if you go to the documentation. 11 00:00:56,780 --> 00:01:00,350 I'll show you what to do and we'll just grab the top ones. 12 00:01:02,750 --> 00:01:06,710 So let's just copy these fixie indentation a bit. 13 00:01:07,670 --> 00:01:08,180 There you go. 14 00:01:08,810 --> 00:01:13,280 And if I refresh well, we need to have a bit of a background so we can see them. 15 00:01:13,290 --> 00:01:14,780 So I'm going to say Collum. 16 00:01:17,540 --> 00:01:18,770 We'll do background. 17 00:01:19,890 --> 00:01:27,660 Color gray and the border will be two pixels, solid black save. 18 00:01:29,190 --> 00:01:31,920 And go back and refresh, we have our borders. 19 00:01:32,880 --> 00:01:34,740 Now, here's something interesting that you can do. 20 00:01:35,250 --> 00:01:41,620 You can do Collum small six and then Collum small three. 21 00:01:42,090 --> 00:01:43,590 Don't worry, I'll explain what that means. 22 00:01:43,620 --> 00:01:45,660 I'm going to refresh and look at that. 23 00:01:46,140 --> 00:01:47,280 The size of this. 24 00:01:48,580 --> 00:01:49,540 Just got smaller. 25 00:01:50,640 --> 00:01:58,120 And that is because Bootstrap has the idea of a grid system and this grid system has 12 lines. 26 00:01:58,410 --> 00:02:00,750 So six plus three is nine. 27 00:02:00,960 --> 00:02:10,260 So it's saying that I want this column to have six spaces out of that 12 and this column to have three 28 00:02:10,260 --> 00:02:11,910 spaces out of that 12. 29 00:02:12,890 --> 00:02:16,250 So if we add a nother column. 30 00:02:17,170 --> 00:02:20,410 And six plus three plus three is 12. 31 00:02:23,150 --> 00:02:28,640 I'm going to say extra here, I refresh, you'll see that it fills in this gap. 32 00:02:30,090 --> 00:02:34,890 What if I put in for here, so that is 13, which is over 12. 33 00:02:35,340 --> 00:02:39,600 Well, if I refresh, this goes down to the next level. 34 00:02:39,810 --> 00:02:43,050 So you see how easy it is to control things and bootstrap. 35 00:02:43,920 --> 00:02:54,630 I could also do something like Collum, extra small will be 12 and then Collum extra small six column, 36 00:02:55,110 --> 00:02:58,260 extra small six and actually will do. 37 00:02:59,700 --> 00:03:00,630 Medium here. 38 00:03:03,700 --> 00:03:05,950 Save let's refresh and see what happens. 39 00:03:06,850 --> 00:03:07,240 Well. 40 00:03:08,320 --> 00:03:16,870 What this is saying that if the size of the window is medium, then I want the whole 12 grid system 41 00:03:16,990 --> 00:03:24,550 to the first five and then six of the 12 to the second and then the extra one six. 42 00:03:24,970 --> 00:03:27,040 So you can see here that that's medium. 43 00:03:27,460 --> 00:03:35,290 But because we have these small properties in here, if I make it smaller, you can see that it resource 44 00:03:35,290 --> 00:03:37,670 down to the six, three, four grid. 45 00:03:38,440 --> 00:03:45,070 Let's change this back to three so it looks better and show you that there's a few other sizes that 46 00:03:45,070 --> 00:03:45,610 we can add. 47 00:03:48,330 --> 00:03:55,440 You can see over here that we have grid options and we have small, medium, large and extra large. 48 00:03:57,140 --> 00:03:59,040 So let's do large and see what happens. 49 00:03:59,060 --> 00:04:06,080 So for large, I want to have everything on their own so we can do this. 50 00:04:10,890 --> 00:04:14,940 And save, let's refresh and see if we can guess what's about to happen. 51 00:04:15,870 --> 00:04:16,980 I'm going to go from. 52 00:04:18,250 --> 00:04:27,010 Medium to large, do you see that 12, 12, 12, so I want each div to occupy 12 spaces, 12 grid systems, 53 00:04:27,010 --> 00:04:28,080 which is the full thing. 54 00:04:28,720 --> 00:04:33,370 If I go to medium, I now occupy with the first one 12. 55 00:04:34,470 --> 00:04:41,040 The second one, six and six, they should be one after another, and if I go down to even smaller. 56 00:04:43,100 --> 00:04:51,100 The small will have six, three and three, so this is how you can create really responsive websites 57 00:04:51,320 --> 00:04:55,250 and that was the biggest selling feature of Bootstrap. 58 00:04:55,250 --> 00:05:00,560 It was solving this really, really hard problem of making sure that our website looked good no matter 59 00:05:00,560 --> 00:05:01,550 what the screen size. 60 00:05:03,360 --> 00:05:05,920 So I wanted to play around with the great options here. 61 00:05:06,000 --> 00:05:09,810 This is the hardest concept to grasp and bootstrap. 62 00:05:10,020 --> 00:05:15,810 Once you've learned this, it's very, very easy to create websites extremely fast. 63 00:05:16,520 --> 00:05:17,910 I'll see in the next one by.