1 00:00:00,800 --> 00:00:01,310 ‫Hey, there. 2 00:00:01,370 --> 00:00:02,060 ‫Welcome back. 3 00:00:02,210 --> 00:00:05,210 ‫Now let us continue our task with the next section. 4 00:00:05,600 --> 00:00:11,630 ‫So what I'm going to do is I'm going to create a new section here inside my main itself, and I'm going 5 00:00:11,630 --> 00:00:13,100 ‫to call this section as. 6 00:00:14,380 --> 00:00:17,500 ‫Conduct, so I'm going to say conduct. 7 00:00:18,480 --> 00:00:22,260 ‫And that's it, so everything I'm going to do will be inside the section. 8 00:00:22,650 --> 00:00:28,890 ‫The first thing I'm going to do is I'm going to create a new div and utilize my Flexbox power because 9 00:00:28,890 --> 00:00:33,600 ‫we are going to have this one item, item two, item three and this one. 10 00:00:33,810 --> 00:00:34,650 ‫And then this. 11 00:00:35,100 --> 00:00:39,210 ‫So we are going to have multiple items that are going to follow a column pattern. 12 00:00:39,660 --> 00:00:48,150 ‫So what I have to do is just create a new date and all this will be Dash Flex set up like box item and 13 00:00:48,150 --> 00:00:49,650 ‫I can add multiple items. 14 00:00:49,680 --> 00:00:54,000 ‫The first thing is I'm going to add up Doug, and I'm going to say, let's talk. 15 00:00:56,380 --> 00:00:56,900 ‫Simple. 16 00:00:57,340 --> 00:01:03,610 ‫Then let me on another item and again, update and let's take maybe 20. 17 00:01:05,760 --> 00:01:06,750 ‫Looks good to me. 18 00:01:07,080 --> 00:01:11,100 ‫Then let me take another item because we are going to have multiple lines. 19 00:01:11,520 --> 00:01:16,650 ‫So here you can say, let's talk and you can provide good information how to conduct your audit. 20 00:01:16,710 --> 00:01:23,430 ‫You are trying to contact me, read maybe 13 projects or maybe four hiding thing, or maybe for my course, 21 00:01:23,430 --> 00:01:24,000 ‫anything. 22 00:01:24,360 --> 00:01:26,730 ‫And then you can provide any catchy line here. 23 00:01:27,270 --> 00:01:31,380 ‫So let me try to create the paragraph for my catchy name. 24 00:01:31,380 --> 00:01:34,290 ‫That two non-remittance saved us one. 25 00:01:35,970 --> 00:01:37,890 ‫Now, everything below looks great. 26 00:01:38,070 --> 00:01:44,070 ‫So we have this let's talk, then we have this, then we have this, we are following the pattern of 27 00:01:44,520 --> 00:01:45,050 ‫rule. 28 00:01:45,360 --> 00:01:47,520 ‫So what I need to do is I need to change this. 29 00:01:47,520 --> 00:01:50,070 ‫I can utilize Flex column. 30 00:01:51,130 --> 00:01:58,390 ‫Save this one now we will have something like this, and it's great, but I need a dissenter, so remember 31 00:01:58,390 --> 00:01:59,450 ‫I have two options. 32 00:01:59,470 --> 00:02:05,010 ‫The first one is going to be a line item saying that because we are following the pattern of column 33 00:02:05,230 --> 00:02:08,710 ‫so I can directly use a line items. 34 00:02:10,670 --> 00:02:14,510 ‫Senator, say this one looks good to me. 35 00:02:14,780 --> 00:02:18,740 ‫That's a good thing I'm going to do is I'm going to justify content center. 36 00:02:20,280 --> 00:02:24,420 ‫Just calling in, Senator. 37 00:02:25,910 --> 00:02:29,000 ‫So this will keep things horizontally, and I sent away. 38 00:02:29,660 --> 00:02:35,390 ‫Now this the first thing is, OK, we have this whole thing, we have this whole thing, but this looks 39 00:02:35,390 --> 00:02:35,770 ‫bad. 40 00:02:35,780 --> 00:02:39,200 ‫This is stretching all the way from here to here. 41 00:02:39,590 --> 00:02:45,590 ‫What I can do is I can add some restriction and the restriction can be maximum weight for this type 42 00:02:45,590 --> 00:02:46,250 ‫of section. 43 00:02:46,610 --> 00:02:48,980 ‫Maybe I want to add restriction here also. 44 00:02:49,430 --> 00:02:51,590 ‫So what I can do is I can add maximum. 45 00:02:52,580 --> 00:02:58,340 ‫Let me try to create my own utility and call this as Mark's with 650. 46 00:03:00,220 --> 00:03:07,210 ‫And had I been out a restriction that virtually maximum of six foot Typekit and I'm going forward, 47 00:03:07,540 --> 00:03:08,970 ‫Maxwell, OK? 48 00:03:09,550 --> 00:03:16,930 ‫And if I need brutalized, if I can just say the section of this dip can follow a maximum of six 50, 49 00:03:16,930 --> 00:03:17,830 ‫something like this. 50 00:03:18,310 --> 00:03:20,020 ‫So what this whole? 51 00:03:21,730 --> 00:03:25,480 ‫And I grew up, I can see em six, five zero and I jump here. 52 00:03:25,720 --> 00:03:28,510 ‫You can see this is falling in the exact same me. 53 00:03:29,350 --> 00:03:33,820 ‫And if there is any type of other content, maybe you have a bigger line than this. 54 00:03:34,120 --> 00:03:38,740 ‫You can add this type of marks word condition on the carpet itself. 55 00:03:39,130 --> 00:03:40,120 ‫OK, this is great. 56 00:03:40,600 --> 00:03:42,640 ‫Now I need to add these font. 57 00:03:43,210 --> 00:03:46,870 ‫So if you work with previous project, you can use font. 58 00:03:46,870 --> 00:03:50,650 ‫Awesome, but Bootstrap has its own icon. 59 00:03:50,770 --> 00:03:57,280 ‫So if you just crawl up, you will have this option regarding icons so I can start get bootstrap dot 60 00:03:57,280 --> 00:03:57,700 ‫com. 61 00:03:58,150 --> 00:04:01,050 ‫And here you will have options to utilize this icon. 62 00:04:01,060 --> 00:04:08,200 ‫But before utilizing them, you need to go with install and then you need to utilize this screen so 63 00:04:08,200 --> 00:04:10,960 ‫you can just copy this one and add it in your head. 64 00:04:11,380 --> 00:04:16,840 ‫Or you can just copy this one and import it in your style or says wherever you want. 65 00:04:17,140 --> 00:04:19,510 ‫This is going to work exactly in the same way. 66 00:04:19,990 --> 00:04:26,050 ‫I'm going to add it in my style or scissors, because since I'm going to have multiple pages, I don't 67 00:04:26,050 --> 00:04:28,120 ‫want this line to be replicated. 68 00:04:28,120 --> 00:04:31,150 ‫I don't want this line to be added on each page. 69 00:04:31,240 --> 00:04:37,720 ‫I can just imported in my style or CSV, and then I'm going to import this in every page. 70 00:04:37,870 --> 00:04:39,400 ‫So that would be much easier. 71 00:04:41,090 --> 00:04:43,190 ‫OK, this looks fine to me. 72 00:04:43,210 --> 00:04:45,310 ‫Now I can add these icons. 73 00:04:47,200 --> 00:04:48,520 ‫Just get back to the top. 74 00:04:49,150 --> 00:04:55,990 ‫Before that, I need to realize something like you will in a light condition, then add this icon manually 75 00:04:56,230 --> 00:04:58,630 ‫and then I need to utilize the Flex. 76 00:04:59,890 --> 00:05:06,430 ‫So what I mean by this is costing I to utilize this, you will condition I need for relief so I can 77 00:05:06,430 --> 00:05:11,500 ‫use this shortcut and then I need to use each one of them individually. 78 00:05:12,550 --> 00:05:14,460 ‫Go ahead, bootstrap icons. 79 00:05:15,430 --> 00:05:17,320 ‫Let's search for LinkedIn. 80 00:05:20,700 --> 00:05:21,900 ‫And you can click here. 81 00:05:23,970 --> 00:05:25,260 ‫And you can copy this one. 82 00:05:25,860 --> 00:05:28,740 ‫Remember, they are also available in the form of equity. 83 00:05:28,770 --> 00:05:30,750 ‫So here let me add this one. 84 00:05:31,940 --> 00:05:37,040 ‫Again, I can repeat this itself and then change it, maybe I want greater. 85 00:05:38,680 --> 00:05:40,480 ‫Or maybe I want Instagram. 86 00:05:41,990 --> 00:05:43,190 ‫And then get some. 87 00:05:45,380 --> 00:05:47,360 ‫If I save this one, get back here. 88 00:05:49,020 --> 00:05:51,570 ‫Now you can see that in the form of a sequence. 89 00:05:52,200 --> 00:05:58,470 ‫So the first thing I can do is I can remove the tax declaration or whatever other condition I want. 90 00:05:58,470 --> 00:06:02,910 ‫I can remove that so I can just add a glacier in my unexcelled. 91 00:06:03,270 --> 00:06:06,210 ‫And I can say, OK, let's uninstall. 92 00:06:07,850 --> 00:06:13,310 ‫And if I go back now, just starting to move, but they are following the condition of column because 93 00:06:13,310 --> 00:06:14,060 ‫they are honest. 94 00:06:14,150 --> 00:06:16,790 ‫They are following the predefined condition of column. 95 00:06:17,270 --> 00:06:20,390 ‫But what we can do is we can define this condition as flags. 96 00:06:20,600 --> 00:06:22,280 ‫I can use the flags. 97 00:06:23,390 --> 00:06:26,900 ‫And then I can provide our property of Flex through. 98 00:06:28,430 --> 00:06:30,890 ‫Now they are going to be in a sequence of elections. 99 00:06:31,640 --> 00:06:34,910 ‫Now it's up to us how we are going to add binding to them. 100 00:06:35,240 --> 00:06:39,230 ‫So what I can do is I can maybe add a class and add some padding. 101 00:06:40,900 --> 00:06:47,950 ‫So here I have options to have padding, let's say, on left and right, I want to go over to so I can 102 00:06:47,950 --> 00:06:49,030 ‫copy this condition. 103 00:06:51,400 --> 00:06:52,390 ‫And save this one. 104 00:06:52,600 --> 00:06:53,890 ‫So if I go back here. 105 00:06:55,010 --> 00:06:59,750 ‫You can see now we have good patterns of this whole icon thing. 106 00:07:00,500 --> 00:07:08,840 ‫The next thing is I need one more line so I can just jump here and I have a peacock and head. 107 00:07:08,840 --> 00:07:13,160 ‫I can just add some content, maybe just add a line or. 108 00:07:17,590 --> 00:07:20,230 ‫Andrew Exum, Dakar. 109 00:07:21,780 --> 00:07:22,740 ‫Save this one. 110 00:07:22,890 --> 00:07:23,760 ‫Get back here. 111 00:07:25,740 --> 00:07:29,610 ‫I can add a break here, so just use PR. 112 00:07:30,150 --> 00:07:31,320 ‫And that should be good. 113 00:07:32,930 --> 00:07:38,870 ‫Again, this is following the left hand side direction, so what I can do is I can mention Big Star 114 00:07:38,870 --> 00:07:44,590 ‫Center, so with my David self, I can mention her fixed senator. 115 00:07:45,680 --> 00:07:48,560 ‫This is going to align everything U.S.A. itself. 116 00:07:50,000 --> 00:07:53,090 ‫One thing is, I need to pull this off. 117 00:07:53,450 --> 00:07:54,840 ‫This is going to be here. 118 00:07:55,100 --> 00:08:00,620 ‫Let's talk class and then this is going to be maybe if has to. 119 00:08:02,950 --> 00:08:06,190 ‫And we need to pause, it will be Africa to all. 120 00:08:07,930 --> 00:08:08,890 ‫Get back here. 121 00:08:10,230 --> 00:08:10,980 ‫Or some? 122 00:08:12,130 --> 00:08:13,540 ‫Great, great, great task. 123 00:08:14,140 --> 00:08:19,330 ‫Now, only four days remaining on our first page, so this looks good and I hope you are understanding 124 00:08:19,330 --> 00:08:21,310 ‫how we are going to utilize bootstrap. 125 00:08:22,590 --> 00:08:28,610 ‫And how we are utilizing everything with bootstrap itself, you can see we have mentioned only three 126 00:08:28,610 --> 00:08:33,990 ‫important properties till now in our CSA's rest, everything is done by bootstrap itself. 127 00:08:34,890 --> 00:08:36,230 ‫So that's all for this lecture. 128 00:08:36,240 --> 00:08:36,990 ‫Let us continue. 129 00:08:36,990 --> 00:08:40,560 ‫Thanks and our next one where we are going to build a quick water. 130 00:08:41,220 --> 00:08:43,950 ‫Thank you for following and I see you guys in the next one.