1 00:00:01,040 --> 00:00:08,430 Hello, in this video, I am going to give you a little introduction on to the Bootstrap five grid system. 2 00:00:08,690 --> 00:00:15,470 So first of all, let me take you to the Bootstrap Solid Documentation website with some great information 3 00:00:15,500 --> 00:00:16,870 on the will to cover it. 4 00:00:17,030 --> 00:00:19,700 But it's also good to actually have the reference guide. 5 00:00:20,600 --> 00:00:28,670 So Bootstrap five, I'll provide a link to this, not to do a little Googling. 6 00:00:34,270 --> 00:00:41,100 It started OK, so we've got to lay out grid more interested and we're going to be implementing this, 7 00:00:41,140 --> 00:00:43,260 but I'll explain what that is in a second. 8 00:00:43,520 --> 00:00:47,740 Actually, no, this is going to be for a separate video in terms of the Soyuzes. 9 00:00:47,980 --> 00:00:54,280 But just to show you, though, the six different sizes, extra small, small, medium, large, excellent, 10 00:00:54,280 --> 00:00:55,150 extra, extra large. 11 00:00:55,330 --> 00:01:00,490 The sizes are right here in terms of when they are essentially triggered based on your proses. 12 00:01:01,030 --> 00:01:07,780 Which and the other thing to mention is if you have a certain size for small, ILGA trickled all the 13 00:01:07,780 --> 00:01:11,880 way up till it hits a NOVA set in the overall overrides. 14 00:01:12,070 --> 00:01:15,700 So it basically goes from a bottom up approach. 15 00:01:16,400 --> 00:01:20,020 So it's basically a mobile first designed a framework. 16 00:01:20,320 --> 00:01:23,640 OK, so we have this and this is what we're going to be implemented. 17 00:01:23,830 --> 00:01:28,480 But this is where I recommend that you take a look at all bootstrapped websites. 18 00:01:28,480 --> 00:01:35,260 We can get rid of this because all these Web sites in the body need to contain a container, which is 19 00:01:35,260 --> 00:01:35,890 a div. 20 00:01:37,310 --> 00:01:39,340 I have a class called container. 21 00:01:39,520 --> 00:01:43,300 You will most likely only ever have one container on the page. 22 00:01:43,540 --> 00:01:47,320 It is technically possible to have more than one, but it is not recommended. 23 00:01:47,600 --> 00:01:50,080 And inside here you will have rows. 24 00:01:50,080 --> 00:01:51,430 You can have multiple rows. 25 00:01:51,640 --> 00:01:56,370 For the purpose of this video, I'm going to have one, but you can have multiple. 26 00:01:56,680 --> 00:02:04,570 So row, as the name suggests, in a a horizontal layout, though it can expand vertically as well, 27 00:02:04,570 --> 00:02:09,820 depending on how many columns there are, which I'm going to cover in a second, but I'm going to cover 28 00:02:09,830 --> 00:02:16,810 them separately, said multiple rows and the grateful group in similar types of content. 29 00:02:16,810 --> 00:02:19,810 So they are responsive together. 30 00:02:20,170 --> 00:02:27,910 Next in here, we're going to have another div and this is going to be have a class of column and that 31 00:02:27,910 --> 00:02:29,800 is when your data go. 32 00:02:29,810 --> 00:02:36,430 So you have a container more than one row potentially, or at least one, and then at least one or more 33 00:02:36,430 --> 00:02:37,380 columns. 34 00:02:37,600 --> 00:02:44,470 So you call Dush, then you're going to put them, which is small, but then I'm going to cover all 35 00:02:44,470 --> 00:02:46,090 agreed sizes in a separate video. 36 00:02:46,090 --> 00:02:55,650 So just tell me for this dash four and I'll explain what that means in a second column for column one. 37 00:02:56,280 --> 00:02:57,040 Duplicate this. 38 00:02:57,040 --> 00:03:02,110 So we have three vs a one, two, three. 39 00:03:02,460 --> 00:03:07,330 So if I go back reload web page, this is what we get for us to resize. 40 00:03:07,330 --> 00:03:10,030 It is still sticks to three different ones. 41 00:03:10,300 --> 00:03:17,200 Until I get to a point where it is too small and it's gone on to the extra small size and now it's all 42 00:03:17,200 --> 00:03:19,080 on one single line. 43 00:03:19,270 --> 00:03:27,520 So if a particular size hasn't been specified for small or for extra large or something like that, 44 00:03:27,760 --> 00:03:32,770 then the amount of columns it should occupy for that size then will happen is what? 45 00:03:33,190 --> 00:03:33,670 Twelve. 46 00:03:33,790 --> 00:03:36,910 Twelve is the full width of the container. 47 00:03:37,150 --> 00:03:42,490 The container does not expand from left to right fully. 48 00:03:42,670 --> 00:03:49,000 It is within a certain set of boundaries which you can have a look on this website that will explain 49 00:03:49,210 --> 00:03:52,090 all of that good stuff for you. 50 00:03:52,390 --> 00:04:00,160 And that's pretty much all you need to know in terms of just the basics of the grid systems. 51 00:04:00,180 --> 00:04:06,310 This is the basic grid, large of a container, a row and columns inside the vessel generally don't 52 00:04:06,310 --> 00:04:10,480 have columns without a row, Novarro without a container. 53 00:04:10,690 --> 00:04:14,080 And yet this is basically the way it works. 54 00:04:14,350 --> 00:04:21,070 If said, if you don't specify one, you'll be default to 12, which is the max, as we haven't specify 55 00:04:21,080 --> 00:04:23,170 the extra s'more and that is lower. 56 00:04:23,320 --> 00:04:30,340 Therefore, that hasn't been overridden by the larger society we specified of small you get twelve. 57 00:04:30,340 --> 00:04:33,820 Hence why we size the roll on individual. 58 00:04:34,030 --> 00:04:40,600 I don't want to see rows the same Lloyd because rows they are a separate feature, but that's really 59 00:04:40,600 --> 00:04:41,440 it for this video. 60 00:04:41,680 --> 00:04:48,790 In the next video, I'm going to cover all the different with sizes that you saw here and. 61 00:04:48,790 --> 00:04:52,330 Yeah, so look forward to that and I'll look forward to seeing you in that video.