1 00:00:04,120 --> 00:00:08,890 Hello everyone and welcome back to our bootstrap course and this lecture we're going to be exploring 2 00:00:08,890 --> 00:00:16,660 how to build a layout using Bootstrap FLEX FLEX is from flex box and it allows you to create layouts 3 00:00:16,690 --> 00:00:24,510 that are easily responsive and put things into nice grid formatting using flex. 4 00:00:24,520 --> 00:00:29,230 So let's go ahead and delete all the code we have from the previous lecture where we learned different 5 00:00:29,230 --> 00:00:33,450 display properties because we don't need that for this lecture. 6 00:00:33,490 --> 00:00:38,680 So just go ahead and feel free to take everything from a body and we have it all saved for you in the 7 00:00:38,680 --> 00:00:43,270 source code file so you can delete it for our practice purposes. 8 00:00:43,270 --> 00:00:43,720 Okay great. 9 00:00:43,720 --> 00:00:46,140 So now we have an empty body here. 10 00:00:46,150 --> 00:00:50,830 Let's go ahead and start demonstrating how we can build Web site layouts using flex. 11 00:00:50,920 --> 00:00:53,710 The best way to understand this is to see it in action. 12 00:00:53,710 --> 00:00:55,040 So how are we to do it. 13 00:00:55,060 --> 00:00:56,450 Start by building a div. 14 00:00:56,450 --> 00:01:04,250 And I'm going to give it the class D flex and this will give it that display value of flex. 15 00:01:04,630 --> 00:01:10,090 And then we're going to make a flex row which means that it's going to take this div and make it into 16 00:01:10,180 --> 00:01:16,920 a row of items and everything inside of the div will be treated as a column within the row. 17 00:01:16,930 --> 00:01:24,970 We can also add some background color to this div or we can give colors to each of the individual elements. 18 00:01:24,970 --> 00:01:25,540 It's up to you. 19 00:01:26,320 --> 00:01:27,100 Okay great. 20 00:01:27,100 --> 00:01:30,580 And let's go ahead and close off this div right here. 21 00:01:30,580 --> 00:01:35,770 So now we have a row and every element we put inside will be treated as a column. 22 00:01:35,830 --> 00:01:40,690 So if we scroll out right now we won't see thing in the output because we have nothing inside. 23 00:01:40,690 --> 00:01:50,920 So let's put some elements inside and make a divide and put in a nother div inside of this flex row 24 00:01:51,160 --> 00:01:56,030 give we can give us a color using BJP primary which is a bootstrap class. 25 00:01:56,050 --> 00:02:05,800 And this will make a blue color as the background of this div and we can also close off that tag with 26 00:02:05,800 --> 00:02:07,140 a closing div tag. 27 00:02:07,390 --> 00:02:10,450 And of course we can add more bootstrap classes as needed. 28 00:02:10,630 --> 00:02:16,520 But for now let's just put in some text like item 1. 29 00:02:17,070 --> 00:02:23,440 So this creates a block on the screen and you can see the text is a bit too much to the corners. 30 00:02:23,440 --> 00:02:30,160 So let's go ahead and add a padding with the bootstrap class P2 which will put some padding immediately 31 00:02:30,420 --> 00:02:35,860 onto that item and we can also change the text color to text white just like that as well. 32 00:02:35,860 --> 00:02:36,370 OK great. 33 00:02:36,370 --> 00:02:38,320 So now we have an item. 34 00:02:38,410 --> 00:02:42,310 Let's go ahead and see how this is a column by adding another column. 35 00:02:42,340 --> 00:02:49,690 So whenever we add another div into our row div we're making another column even though we didn't say 36 00:02:49,690 --> 00:02:53,470 that it was a column specifically flex will treat it as a column. 37 00:02:53,620 --> 00:02:56,950 So let's go ahead open up another div. 38 00:02:57,010 --> 00:03:05,380 This is going to be of class we have to add another culture it's we can use g dark which will make a 39 00:03:05,380 --> 00:03:09,940 dark color that way we can differentiate it without even needing to see borders we can differentiate 40 00:03:10,030 --> 00:03:13,950 each block each item with a different color. 41 00:03:14,520 --> 00:03:14,820 OK. 42 00:03:14,860 --> 00:03:17,650 We're going to give it background dark and we're gonna put it in here. 43 00:03:17,650 --> 00:03:23,740 Item two as you can see here we have another item right there who's going to add padding to it and then 44 00:03:23,740 --> 00:03:25,430 text white as well. 45 00:03:25,680 --> 00:03:25,940 OK. 46 00:03:25,960 --> 00:03:26,200 Great. 47 00:03:26,200 --> 00:03:30,220 So now we have two items and as you can see there are created side by side. 48 00:03:30,430 --> 00:03:35,200 If I stretch it out if I switched in there's still side by side as columns. 49 00:03:35,680 --> 00:03:36,020 OK. 50 00:03:36,040 --> 00:03:38,250 So I'm going to add in one more. 51 00:03:38,320 --> 00:03:41,340 So you can see div class. 52 00:03:41,480 --> 00:03:48,590 Swans can have the big primary again back recall primary so as the padding of and the text white to 53 00:03:48,820 --> 00:03:55,470 close offered div and put in item three OK and that creates a third item. 54 00:03:55,510 --> 00:03:58,950 And similarly to making a row you can also make a column. 55 00:03:59,020 --> 00:04:05,950 So if I go ahead and change this from flex row to flex column you'll notice they'll all jump into their 56 00:04:05,950 --> 00:04:07,000 own rows instead. 57 00:04:07,720 --> 00:04:08,050 Why. 58 00:04:08,050 --> 00:04:14,320 Well because the container div is no longer a row it's now a column which means that everything inside 59 00:04:14,320 --> 00:04:16,340 of it will now be treated as a row. 60 00:04:17,800 --> 00:04:18,400 OK great. 61 00:04:18,400 --> 00:04:23,430 So now you know how to make a flex row and a flex column on top of this. 62 00:04:23,440 --> 00:04:26,110 There are more properties that you can add. 63 00:04:26,110 --> 00:04:27,750 So let's go ahead and look at that. 64 00:04:27,760 --> 00:04:34,680 Let's put them back into a row and what we can do is justify where the items are placed. 65 00:04:34,690 --> 00:04:39,590 So right now they're all placed side by side with no space in between as the default. 66 00:04:39,590 --> 00:04:45,400 But we can add what's known as he justified content property to add spacing between them in different 67 00:04:45,400 --> 00:04:45,820 ways. 68 00:04:46,120 --> 00:04:48,410 So let's go ahead and test this out first. 69 00:04:48,430 --> 00:04:55,570 Let's go ahead and add the justify content start so by adding this class nothing has changed right now 70 00:04:55,580 --> 00:04:57,230 because this is the default. 71 00:04:57,310 --> 00:05:02,700 So they're all justified to the start of our div here. 72 00:05:03,070 --> 00:05:03,750 As you can see. 73 00:05:04,090 --> 00:05:04,330 OK. 74 00:05:04,330 --> 00:05:06,480 The other one you can do is justify end. 75 00:05:06,670 --> 00:05:13,750 So you might see now if I stretch out the screen they'll be stuck to the end of the screen instead of 76 00:05:14,440 --> 00:05:17,430 to the start with justified start. 77 00:05:17,620 --> 00:05:24,720 And if I completely remove justified content start this is the default which is start OK. 78 00:05:24,760 --> 00:05:30,160 Let's put back start and let's put back end and right now this is on a row which is why you're being 79 00:05:30,670 --> 00:05:32,820 stuck to the right side. 80 00:05:32,860 --> 00:05:35,710 But if they were a column then it would be stuck to the bottom. 81 00:05:35,770 --> 00:05:39,490 So it's always going to be the cross axis here. 82 00:05:39,730 --> 00:05:42,060 If it's a row then it's going to be to the y axis. 83 00:05:42,070 --> 00:05:49,630 Whereas if it's a column it's going to be to the x axis improve this by making this a flex column. 84 00:05:49,630 --> 00:05:52,420 And now you can see we're just fine a content end. 85 00:05:53,050 --> 00:06:02,260 But in order to see this be stuck to the bottom of the div or the end of the div we would have to give 86 00:06:02,290 --> 00:06:06,370 a height to the div so we can go ahead and do that as well. 87 00:06:06,640 --> 00:06:14,350 You can immediately place the height can do it with either customs CSX just for testing purposes by 88 00:06:14,350 --> 00:06:21,100 setting the height like this or we can set it with bootstrap height as well. 89 00:06:21,390 --> 00:06:21,960 OK. 90 00:06:22,180 --> 00:06:30,010 So as you can see now they are being put to this portion we can change this to start and now they'll 91 00:06:30,010 --> 00:06:33,740 be moved down like that. 92 00:06:33,760 --> 00:06:33,970 OK. 93 00:06:34,000 --> 00:06:34,860 Great. 94 00:06:34,900 --> 00:06:42,280 So let's put this back to justify and and let's just delete the height for now and let's look at some 95 00:06:42,280 --> 00:06:44,730 more properties of justified content. 96 00:06:46,000 --> 00:06:49,810 So we have that right now justify content end and they're in a row. 97 00:06:50,020 --> 00:06:57,940 We can also put justified content center and this will always keep the items in the center of the screen 98 00:06:58,330 --> 00:06:59,730 as you can see. 99 00:07:00,310 --> 00:07:08,710 Another one is around which will have this effect where it places them evenly on the screen so evenly 100 00:07:08,710 --> 00:07:15,530 spaced with also even margins on either side. 101 00:07:15,820 --> 00:07:20,110 The final justified content value you can use is between. 102 00:07:20,110 --> 00:07:26,230 This is similar to justify content around but now you can see that there is a smaller margin on the 103 00:07:26,830 --> 00:07:29,200 right and left hand sides of all of them. 104 00:07:29,210 --> 00:07:33,970 And instead there is a larger margin in between all the items. 105 00:07:33,970 --> 00:07:40,000 So depending on how you want your website to be laid out you will choose one of these justified content 106 00:07:41,200 --> 00:07:44,700 values for your containing div. 107 00:07:44,740 --> 00:07:44,950 OK. 108 00:07:44,980 --> 00:07:50,470 So that was justified content and it's important to remember that it works on the cross axis. 109 00:07:50,500 --> 00:07:54,680 The next one is on line items and let's go ahead and try that out. 110 00:07:54,700 --> 00:08:02,750 It's going to be a line items is the property name and you can set again one of five values which are 111 00:08:02,750 --> 00:08:05,990 going to be start and center baseline and stretch. 112 00:08:05,990 --> 00:08:07,820 So let's test them all out first. 113 00:08:07,820 --> 00:08:11,960 We'll begin with a line item start and you'll notice we won't see any difference from when we didn't 114 00:08:11,960 --> 00:08:13,670 have any align items. 115 00:08:13,670 --> 00:08:15,200 It's all going to be the same. 116 00:08:15,330 --> 00:08:24,500 And that's because on line items works on the cross axis again so we have to we have to set the height 117 00:08:24,620 --> 00:08:27,400 of the div here in order to do that. 118 00:08:27,410 --> 00:08:28,440 You can use. 119 00:08:28,440 --> 00:08:38,270 Style equals height one hundred pixels and now we're going to see this in action. 120 00:08:38,280 --> 00:08:41,220 So we're going to go ahead and try. 121 00:08:41,820 --> 00:08:46,020 And and I could see they move down on the page. 122 00:08:46,020 --> 00:08:51,660 And the best way to see this is to give the entire div a background color. 123 00:08:51,690 --> 00:08:54,730 So I'm going to go ahead and do that as well. 124 00:08:54,980 --> 00:09:02,750 I can give it the background color of something like primary or secondary which will be a light gray. 125 00:09:03,610 --> 00:09:05,040 OK I'll give it light gray. 126 00:09:05,280 --> 00:09:11,360 So as you can see now we have this light gray color and that is the coloring on the entire div. 127 00:09:11,790 --> 00:09:19,650 And then each of these items they are now aligned to the end of the div which means they're aligned 128 00:09:20,550 --> 00:09:23,000 to the bottom because this is a row. 129 00:09:23,070 --> 00:09:26,690 So in this case it's going to be on the same axis. 130 00:09:26,700 --> 00:09:29,010 A row is put on the x axis. 131 00:09:29,160 --> 00:09:32,960 And so the items would be aligned to the x axis. 132 00:09:32,970 --> 00:09:40,440 Now if this was a column and we aligned it to the end you'll notice how all the items are aligned to 133 00:09:40,440 --> 00:09:48,350 the end of the y axis because a column is made on the y axis. 134 00:09:48,350 --> 00:09:48,590 Okay. 135 00:09:48,630 --> 00:09:52,730 Let's go back to row first and we can look at all of the different alignments for row and then we can 136 00:09:52,730 --> 00:09:54,870 look at all the alignments for column after. 137 00:09:55,080 --> 00:10:01,640 So we have a line items end right now for Flex row also do center as you can see it centers them on 138 00:10:01,700 --> 00:10:06,120 the x axis of the entire height of this div. 139 00:10:06,140 --> 00:10:10,550 So that's why you will only see this in effect if you have a height on the containing div which we set 140 00:10:10,550 --> 00:10:17,400 to 100 pixels because otherwise the containing div would be the same size as the items itself. 141 00:10:17,490 --> 00:10:22,460 And so there would be nothing to align to because items would only be by themselves by providing a larger 142 00:10:22,460 --> 00:10:23,800 div to put them inside. 143 00:10:23,810 --> 00:10:25,070 Now they can move around. 144 00:10:26,120 --> 00:10:26,370 OK. 145 00:10:26,430 --> 00:10:27,970 We have a line item center. 146 00:10:28,000 --> 00:10:39,740 There is also stretch and in this case they're going to stretch to fill the entire y axis here and then 147 00:10:39,740 --> 00:10:42,300 we can also use baseline. 148 00:10:42,560 --> 00:10:50,900 And this will align them to the base line which be the starting position of this div which in here is 149 00:10:51,320 --> 00:10:57,340 0 0 0 from the top and 0 from the left. 150 00:10:57,360 --> 00:10:57,560 OK. 151 00:10:57,590 --> 00:11:04,280 Let's look at this from a flex column perspective so now we put them into a flex column and this is 152 00:11:04,280 --> 00:11:10,200 what it looks like when you line to the baseline again to the top and to the leftmost corner. 153 00:11:10,520 --> 00:11:17,600 You can also do a line item start which won't change anything because the start is the default and we'll 154 00:11:17,600 --> 00:11:23,210 move them to the end of the y axis baseline. 155 00:11:23,320 --> 00:11:32,240 We really looked at and stretch stretch will fill the column to take up the entire axis that it's on. 156 00:11:32,270 --> 00:11:40,530 So it's going across the entire y axis and for a row was going on the entire x axis. 157 00:11:40,940 --> 00:11:41,360 Okay great. 158 00:11:41,360 --> 00:11:48,350 So as you can see having the ability to align and justify and fill and even space out your items in 159 00:11:48,350 --> 00:11:54,380 different ways it's extremely valuable to use as a developer because if you had an image here and it 160 00:11:54,380 --> 00:12:00,140 looks like this in the small screen then on the large screen it suddenly is aligned to the start. 161 00:12:00,980 --> 00:12:09,080 It's important to know how to use the proper alignment and justifying and or justifying to make sure 162 00:12:09,080 --> 00:12:15,250 that an item will fill the entire screen instead of a portion of the screen when it's on a large screen. 163 00:12:15,320 --> 00:12:21,530 There are many different kinds of things you have to consider when developing such as this including 164 00:12:21,800 --> 00:12:27,590 the size of the items and their alignment and placing on the large screen versus a small screen and 165 00:12:27,590 --> 00:12:30,130 how they are in relation to one another. 166 00:12:30,140 --> 00:12:35,380 So now that you have the ability to align items and justify them using flex I highly recommend that 167 00:12:35,390 --> 00:12:44,780 you try out using all these different alignment and justifying values because you will need to use them 168 00:12:44,990 --> 00:12:48,970 in different ways and choose different ones depending on your Web site's layout. 169 00:12:49,130 --> 00:12:54,770 But as you can see flex is extremely useful for making a layout and before the respects people relied 170 00:12:54,770 --> 00:12:56,680 on tables and CSX. 171 00:12:56,690 --> 00:13:02,840 So you had to do it all yourself with CSX and flex makes it much more convenient and especially with 172 00:13:02,900 --> 00:13:09,650 being in bootstrap you now don't have to put the flex in CSX you can put the flex in bootstrap classes 173 00:13:09,950 --> 00:13:14,090 which makes it much more convenient and efficient to build. 174 00:13:14,090 --> 00:13:14,660 Other than that. 175 00:13:14,660 --> 00:13:17,360 Thank you all for watching and we will see you in the next lecture.