1 00:00:00,410 --> 00:00:06,720 We'll come back in this lesson and demonstrate the bootstrap grid system and the grid system is probably 2 00:00:06,720 --> 00:00:11,310 the number one reason that people use bootstrap the forms nap hours. 3 00:00:11,310 --> 00:00:16,500 The buttons are nice stylistic changes we can make with bootstrap but the bootstrap grid system will 4 00:00:16,500 --> 00:00:19,290 act as the skeleton of our entire application. 5 00:00:19,440 --> 00:00:23,980 It's a really easy way for us to add structure and lay out to our application. 6 00:00:24,000 --> 00:00:27,480 So let me show you a few examples of what you can do with the grid system. 7 00:00:27,480 --> 00:00:33,990 I have a few sites open from Bootstrap ex-beau the first one here is a product page for a water pitcher 8 00:00:34,380 --> 00:00:36,140 and scroll down. 9 00:00:36,240 --> 00:00:37,530 Notice the lay out here. 10 00:00:37,560 --> 00:00:46,740 We have three items side by side and then also notice as they change size here they scale down and then 11 00:00:46,890 --> 00:00:50,310 when I hit tablet size they stack on top of each other. 12 00:00:51,090 --> 00:00:56,940 So that's the bootstrap grid system at work as is this right here where we have another similar effect 13 00:00:56,940 --> 00:00:57,270 . 14 00:00:57,270 --> 00:01:02,100 They scale and then they stack on tablet and mobile size. 15 00:01:02,880 --> 00:01:04,110 Here's another example. 16 00:01:04,140 --> 00:01:10,440 This is Icelandic musician and Olafur Arnolds and this is scroll down on this site. 17 00:01:10,560 --> 00:01:19,260 We have some content that's built with the grid system here that you can see similar layout but it's 18 00:01:19,260 --> 00:01:23,150 not just that this is built with a grid system as well. 19 00:01:23,160 --> 00:01:25,210 This here this content. 20 00:01:26,100 --> 00:01:28,350 These tour dates here. 21 00:01:28,350 --> 00:01:33,930 Basically using the grid system we can say that we want some content to take up 100 percent of the screen 22 00:01:34,950 --> 00:01:39,870 then we can also use it to say that we want each one of these to take up 25 percent of the width of 23 00:01:39,870 --> 00:01:46,620 the screen until we hit the mobile side or the tablet size for each take up 50 now and then when we 24 00:01:46,620 --> 00:01:49,220 hit Mobile they each take up 100 percent. 25 00:01:49,860 --> 00:01:50,850 Same thing done here. 26 00:01:50,850 --> 00:01:56,660 It lets us divide that with the screen into pieces and pick how many pieces we want. 27 00:01:56,790 --> 00:02:00,660 Each of our own elements to takeup and here's the last one we've seen already. 28 00:02:00,660 --> 00:02:05,670 It's called creative Tim desert scroll down here similar content. 29 00:02:05,680 --> 00:02:09,530 Here is the grid system and here as well. 30 00:02:09,570 --> 00:02:11,430 So this is all done with the grid system. 31 00:02:11,430 --> 00:02:15,590 All of this so really important very exciting stuff. 32 00:02:15,760 --> 00:02:20,640 It helps us lay things out so easily compared to what we'd have to do without bootstrap. 33 00:02:20,670 --> 00:02:25,660 So we'll be using bootstraps grid system and pretty much every application we make using bootstrap. 34 00:02:25,890 --> 00:02:27,500 And let me show you one of them. 35 00:02:27,540 --> 00:02:33,940 This is our yo camp application and notice that we have a grid of campgrounds for across. 36 00:02:33,960 --> 00:02:39,750 And as I resize the screen notice that they scale and then we go to two across and then down to Mobile 37 00:02:39,750 --> 00:02:40,050 . 38 00:02:40,050 --> 00:02:44,480 We go to one across and it's a really nice easy to use mobile layout. 39 00:02:44,760 --> 00:02:47,840 So that's just one place where we'll use a grid system. 40 00:02:47,850 --> 00:02:54,060 Now let's get started in writing some code using the grid system so full screen this window and go back 41 00:02:54,060 --> 00:02:57,800 to get bootstrapped dotcom under the Assessed tab. 42 00:02:58,050 --> 00:03:00,850 You can click on grid system. 43 00:03:00,850 --> 00:03:05,670 There's quite a bit to the grid system but I'm going to start by just pointing out a single number here 44 00:03:06,130 --> 00:03:07,300 12. 45 00:03:07,470 --> 00:03:09,890 This is really important to how the grid system works. 46 00:03:09,900 --> 00:03:15,930 So every container and bootstrap can be divided into 12 different columns and then using the grid system 47 00:03:16,230 --> 00:03:21,150 we can pick how many of those 12 units each element should take up. 48 00:03:21,150 --> 00:03:27,050 So in this case it looks like they have something taking up about 10 out of 12 units. 49 00:03:27,060 --> 00:03:33,420 And then over here two out of 12 units or might be nine and 3 but they have some ratio where they have 50 00:03:33,420 --> 00:03:40,320 more out of those 12 on the left side and then a small fraction out of the 12 on the right side. 51 00:03:40,770 --> 00:03:46,510 So if we go back to camp here this is our container right here. 52 00:03:46,890 --> 00:03:51,670 And each one of these out of 12 units each one takes up three units. 53 00:03:51,810 --> 00:03:56,850 So we end up with four equal columns and then we shrink it down right here. 54 00:03:56,880 --> 00:04:00,040 Now they each take up six units out of 12. 55 00:04:00,240 --> 00:04:02,840 So again that number 12 very important. 56 00:04:02,850 --> 00:04:03,660 Now let's go in right. 57 00:04:03,660 --> 00:04:05,130 Our very first grid. 58 00:04:05,250 --> 00:04:12,710 So I have a file made grid does h t m l it's empty except for the bootstraps the SS file and to start 59 00:04:12,870 --> 00:04:14,640 we need to define a container. 60 00:04:14,860 --> 00:04:18,180 Anytime we use a Boucek grid it needs to be inside of a container. 61 00:04:18,210 --> 00:04:22,230 So class equals container. 62 00:04:22,290 --> 00:04:28,950 And the first thing we need to do is to find another div with class equal to row instead of each row 63 00:04:28,950 --> 00:04:29,190 . 64 00:04:29,220 --> 00:04:31,100 We have 12 units to pick from. 65 00:04:31,350 --> 00:04:37,110 So what we're going to start by doing is just doing a 50 50 split we'll have 1 div that takes up 6 out 66 00:04:37,110 --> 00:04:40,730 of 12 and then another div that takes up 6 out of 12. 67 00:04:41,070 --> 00:04:42,050 So let's do that now. 68 00:04:42,120 --> 00:04:48,060 We'll add a div and then I'll also add my second division and right now it's just two devices are empty 69 00:04:48,060 --> 00:04:48,330 . 70 00:04:48,330 --> 00:04:49,430 You're not going to work. 71 00:04:49,650 --> 00:04:57,000 But what I'll do is add a class to the first one and this will look a little bit weird column A large 72 00:04:57,670 --> 00:05:00,300 six and we'll do the same thing here. 73 00:05:00,300 --> 00:05:03,520 Class equals column large six. 74 00:05:03,630 --> 00:05:05,200 Then we'll add some content in here. 75 00:05:05,210 --> 00:05:10,880 They will just say column large six. 76 00:05:10,950 --> 00:05:12,140 Same thing here. 77 00:05:12,210 --> 00:05:18,950 And as I do that let's save and we won't actually see very much we don't see the grid itself. 78 00:05:19,020 --> 00:05:24,300 So to make that clearer I'll define a class here instead of a style tag. 79 00:05:24,300 --> 00:05:26,670 What I'll do is define a class. 80 00:05:26,730 --> 00:05:31,350 I'll just call it pink and I'll apply this class to or two divs so we can see them. 81 00:05:31,490 --> 00:05:32,820 So right now they're just white. 82 00:05:32,820 --> 00:05:33,660 No border. 83 00:05:33,750 --> 00:05:34,840 Just a little bit of text. 84 00:05:35,010 --> 00:05:36,050 But if we add this in. 85 00:05:36,180 --> 00:05:37,010 So pink. 86 00:05:37,140 --> 00:05:45,660 And then we want background to be pink and we'll do a purple border one pixel solid purple and then 87 00:05:45,660 --> 00:05:49,950 we'll apply the pink class to these two divs. 88 00:05:49,950 --> 00:05:52,660 Each one takes up six units. 89 00:05:52,680 --> 00:05:54,570 Now we go back and refresh. 90 00:05:54,900 --> 00:05:55,580 There we go. 91 00:05:55,800 --> 00:05:59,640 You can see we have two divs that take up exactly half of the container. 92 00:05:59,670 --> 00:06:01,930 The container starts here and here. 93 00:06:02,460 --> 00:06:04,530 And we've divided into two. 94 00:06:04,620 --> 00:06:10,110 So now we can go back and play around a little bit more and let's try adding in a third column. 95 00:06:10,410 --> 00:06:16,150 And this time will make the middle column eight units and then the left and right will be two. 96 00:06:16,170 --> 00:06:21,270 So end up and I'll change these numbers here. 97 00:06:21,280 --> 00:06:22,200 There we go. 98 00:06:22,200 --> 00:06:27,960 We'll end up with a nice centered column in the middle and then two smaller columns on the left and 99 00:06:27,960 --> 00:06:30,900 right that we could use for a side bar or something. 100 00:06:30,900 --> 00:06:34,860 So that's a very basic concept underlying all of the bootstrap grid system. 101 00:06:34,920 --> 00:06:40,290 We have 12 units going across whatever container we're working inside of and we can designate those 102 00:06:40,290 --> 00:06:42,210 12 units in any way that we want. 103 00:06:42,240 --> 00:06:49,830 So we could do 12 individual columns each one column large one and we could do that 12 times just like 104 00:06:49,830 --> 00:06:52,170 this. 105 00:06:52,290 --> 00:06:53,600 Make sure I don't lose count. 106 00:06:54,090 --> 00:06:54,670 There we go. 107 00:06:54,690 --> 00:06:56,620 And then we'll get rid of these two for now. 108 00:06:56,820 --> 00:07:01,630 And if I were fresh you'll see in one row we have 12 evenly sized columns. 109 00:07:01,650 --> 00:07:07,570 Each one takes up one unit and then I'll also show you we can add other rows. 110 00:07:07,740 --> 00:07:14,390 So let's do that now div class equals row and it will just go below this first row that we have. 111 00:07:14,730 --> 00:07:18,870 So inside of this one let's do div. 112 00:07:19,020 --> 00:07:23,350 Class equals column Dasch large and let's do four. 113 00:07:23,370 --> 00:07:27,280 So we'll split it up to three evenly sized units. 114 00:07:27,360 --> 00:07:36,260 So column arge for her go just like that. 115 00:07:36,420 --> 00:07:44,190 And let's go take a look now and you can see we didn't apply the pink class but we have three evenly 116 00:07:44,190 --> 00:07:49,260 sized columns that fall below the 12 evenly sized columns were created. 117 00:07:49,470 --> 00:07:53,240 So we could add in the pink class just to make it easier to see what's happening. 118 00:07:53,940 --> 00:07:54,800 And there we go. 119 00:07:55,140 --> 00:07:57,350 So this is just a simple example. 120 00:07:57,420 --> 00:08:01,470 You wouldn't actually have these pink boxes most likely on our site. 121 00:08:01,710 --> 00:08:08,730 But as you can see here we have a grid where we have rows and each row has four columns going across 122 00:08:08,730 --> 00:08:08,760 . 123 00:08:08,760 --> 00:08:15,830 Each one is three units wide or here on this creative Tim site. 124 00:08:15,900 --> 00:08:19,830 We have three columns going across each one is four units wide. 125 00:08:20,070 --> 00:08:20,900 Same thing here. 126 00:08:20,900 --> 00:08:23,860 Three columns going across here. 127 00:08:23,910 --> 00:08:24,960 We have four columns. 128 00:08:24,960 --> 00:08:26,840 Each one has three units wide. 129 00:08:27,390 --> 00:08:30,650 So that's the very very basics of the grid in the next video. 130 00:08:30,660 --> 00:08:35,850 We'll talk about how to make the grid responsive and have different layouts at different sizes. 131 00:08:35,850 --> 00:08:38,230 Right now we've been working with column large one. 132 00:08:38,250 --> 00:08:43,050 I have explained with a large means and there are three other sizes and we'll see those in the next 133 00:08:43,050 --> 00:08:49,080 video and we'll also see how we can write nested grids where we can add another row inside of any of 134 00:08:49,080 --> 00:08:52,290 these columns and split that into further 12 pieces.