1 00:00:00,590 --> 00:00:01,190 ‫Hey, dad. 2 00:00:01,340 --> 00:00:02,060 ‫Welcome back. 3 00:00:02,450 --> 00:00:08,480 ‫Now in this lecture, let us discuss about layoffs, so there are few points that are important like 4 00:00:08,480 --> 00:00:12,260 ‫break points, container grade column and a few other things. 5 00:00:12,800 --> 00:00:15,560 ‫So the first thing I want to discuss is great point. 6 00:00:16,130 --> 00:00:21,260 ‫Now, by default, we have been working with mediocrities, so we have several great points. 7 00:00:21,260 --> 00:00:24,770 ‫Maybe at Boyland Excel related to be exact. 8 00:00:25,070 --> 00:00:29,410 ‫Then we have around 760 age than we have around 500 or 400. 9 00:00:29,690 --> 00:00:35,120 ‫So that are different break points and why we use them to customize our responsiveness. 10 00:00:35,480 --> 00:00:42,080 ‫For example, if I just scroll down or right click here, and if I try to just see how this is going 11 00:00:42,080 --> 00:00:48,800 ‫to work, you will get an understanding that why these whole customization regarding responsiveness 12 00:00:48,800 --> 00:00:49,640 ‫is important. 13 00:00:50,300 --> 00:00:53,120 ‫So there are few break points with our bootstrap. 14 00:00:53,660 --> 00:01:03,320 ‫The first one is everything greater than 576 eSIM, everything greater than 768 M.D., everything greater 15 00:01:03,320 --> 00:01:07,400 ‫than 992 and everything greater than 100. 16 00:01:07,430 --> 00:01:08,120 ‫Excellent. 17 00:01:08,360 --> 00:01:10,280 ‫And then double excel. 18 00:01:10,970 --> 00:01:12,600 ‫So these are important. 19 00:01:12,890 --> 00:01:13,400 ‫Why? 20 00:01:13,700 --> 00:01:19,690 ‫Because we can mention things that I want this property greater than 768 pixel. 21 00:01:20,540 --> 00:01:24,860 ‫Or maybe I want so Dana, that property greater, then maybe 200 pixel. 22 00:01:25,400 --> 00:01:28,760 ‫So these are cheat code, basically, and they are going to die. 23 00:01:28,760 --> 00:01:29,630 ‫Is them a lot? 24 00:01:30,560 --> 00:01:33,680 ‫Don't worry, we are going to jump back on to this topic again. 25 00:01:34,190 --> 00:01:36,950 ‫But let me jump on to the other one which just contain. 26 00:01:37,760 --> 00:01:39,650 ‫Now, similarly, we have three points. 27 00:01:40,010 --> 00:01:46,790 ‫We need some type of container container to keep everything inside and have some distance on left and 28 00:01:46,790 --> 00:01:47,270 ‫right side. 29 00:01:47,270 --> 00:01:55,100 ‫So when I click here and if I jump on to, I mean, you can see I have some distance from left and right 30 00:01:55,220 --> 00:01:57,140 ‫because of this whole container thing. 31 00:01:57,650 --> 00:01:59,060 ‫Now what is this container? 32 00:01:59,420 --> 00:02:00,200 ‫It's simple. 33 00:02:00,230 --> 00:02:05,630 ‫If I use container property, it is going to restrict my width of my content. 34 00:02:06,290 --> 00:02:10,880 ‫So maybe I'm using a screen for 576 pixel. 35 00:02:11,240 --> 00:02:17,600 ‫My container will take only 540 pixel and the remaining space will be denoted for margin. 36 00:02:18,500 --> 00:02:25,370 ‫If I'm using a screen of seven six in, my screen will be restricted towards 720 only and the remaining 37 00:02:25,370 --> 00:02:28,910 ‫48 pixels will be utilized for margins. 38 00:02:29,270 --> 00:02:30,770 ‫And it keeps on falling. 39 00:02:31,190 --> 00:02:35,270 ‫Now it's good time for us to understand this whole S.M.A.R.T thing. 40 00:02:35,480 --> 00:02:36,800 ‫It's important now. 41 00:02:37,370 --> 00:02:45,290 ‫So when I see Container Dash, maybe that means I need to start this property from this empty break 42 00:02:45,290 --> 00:02:45,660 ‫point. 43 00:02:45,680 --> 00:02:48,860 ‫That means anything greater than 768. 44 00:02:49,250 --> 00:02:53,480 ‫So if I see a container empty, it will not work for small screen. 45 00:02:53,690 --> 00:02:58,690 ‫It will only work with bigger screen bigger than 768. 46 00:02:59,210 --> 00:03:07,940 ‫If I see a container and that means it will start once we reach this LG, which is 992 pixels, and 47 00:03:07,940 --> 00:03:09,470 ‫that's how this is going to work. 48 00:03:10,250 --> 00:03:16,860 ‫Now here you will also understand about new dawn, which is fluid, and that means I just flow basically 49 00:03:16,880 --> 00:03:18,650 ‫200 percent for all these screens. 50 00:03:19,310 --> 00:03:20,570 ‫I hope you got the idea. 51 00:03:22,230 --> 00:03:24,510 ‫Now, the next one is great. 52 00:03:24,720 --> 00:03:29,640 ‫Another important concept, and I want to discuss about this topic one example. 53 00:03:30,330 --> 00:03:37,290 ‫So for now, let's jump here now here I'm going to give this dude a glass of container because now we 54 00:03:37,290 --> 00:03:40,770 ‫have some information so I can directly use container. 55 00:03:41,070 --> 00:03:41,930 ‫Save this one. 56 00:03:41,970 --> 00:03:42,780 ‫Get back here. 57 00:03:43,380 --> 00:03:49,920 ‫You can see now I'm utilizing a fix work and I have some space on both the side, left and right. 58 00:03:50,760 --> 00:03:52,230 ‫Thanks to our container. 59 00:03:52,740 --> 00:03:55,530 ‫Now what is this great and how do you today's test? 60 00:03:56,100 --> 00:03:59,670 ‫The basic example is our complete screen. 61 00:04:00,030 --> 00:04:05,600 ‫This whole screen from this point to this point is divided into two groups. 62 00:04:06,210 --> 00:04:09,030 ‫Now don't confuse test with this great topic. 63 00:04:09,780 --> 00:04:12,630 ‫No, it's different and specific to bootstrap. 64 00:04:13,140 --> 00:04:16,680 ‫Don't mix or adopt them here and bootstrap. 65 00:04:17,040 --> 00:04:19,920 ‫Our screen is divided into 12 parts. 66 00:04:21,160 --> 00:04:24,100 ‫Now I can call this according to law. 67 00:04:24,170 --> 00:04:28,330 ‫So here, maybe I want these two, I want to utilize these two. 68 00:04:28,570 --> 00:04:31,650 ‫So suppose I have this only see. 69 00:04:31,940 --> 00:04:32,260 ‫Yep. 70 00:04:32,560 --> 00:04:36,870 ‫So I want to utilize only these two content and let me remove this border. 71 00:04:36,880 --> 00:04:41,700 ‫No, I just need to explain the container and this whole to. 72 00:04:43,030 --> 00:04:50,020 ‫So we have everything inside our container, and we can now utilize this default grade, which is good 73 00:04:50,020 --> 00:04:57,820 ‫bootstrap, and I can say, OK, I need to use this six grade only and then the remaining six is for 74 00:04:57,820 --> 00:04:58,660 ‫the other element. 75 00:04:59,140 --> 00:05:03,370 ‫That means you have to l grade anything on your screen. 76 00:05:03,490 --> 00:05:09,700 ‫You are utilizing phone, you are utilizing, I mean, time off screen, you have to integrate according 77 00:05:09,700 --> 00:05:14,230 ‫to bootstrap, and you can define content within these 12 grades. 78 00:05:14,650 --> 00:05:16,900 ‫For example, inside a container. 79 00:05:16,900 --> 00:05:21,100 ‫I can take a roll as we are going to build this whole row. 80 00:05:21,430 --> 00:05:24,370 ‫And then we are going to divide them into different column. 81 00:05:24,790 --> 00:05:26,360 ‫Or I should say great. 82 00:05:27,340 --> 00:05:29,050 ‫So let's say here I take. 83 00:05:30,860 --> 00:05:31,340 ‫Drew? 84 00:05:34,750 --> 00:05:37,930 ‫So this is our complete row, according to Bootstrap. 85 00:05:38,800 --> 00:05:46,240 ‫Now I can divide them into different columns and I can see the first six column will be for this element 86 00:05:46,870 --> 00:05:49,990 ‫and the next six column will be for this element. 87 00:05:50,380 --> 00:05:50,760 ‫OK. 88 00:05:50,830 --> 00:05:51,510 ‫This looks great. 89 00:05:51,520 --> 00:05:56,590 ‫So what I can do is I can utilize call Dash six. 90 00:05:57,520 --> 00:05:57,940 ‫OK. 91 00:05:58,150 --> 00:06:01,930 ‫And I'm going to take this back and keep this inside this. 92 00:06:02,960 --> 00:06:11,300 ‫And had I can again, a corner shakes and I can take this feedback and keep this inside this day and 93 00:06:11,300 --> 00:06:12,050 ‫save this one. 94 00:06:13,930 --> 00:06:19,210 ‫So basically, what happened is we have created this rule, and inside this role, we have divided the 95 00:06:19,210 --> 00:06:25,970 ‫first six grade or column who are Peter and the next six great column or another Peter out. 96 00:06:25,990 --> 00:06:31,120 ‫And if I jump back here, you can see this is the first one and this is the second one. 97 00:06:31,420 --> 00:06:32,770 ‫And if I right click here. 98 00:06:33,650 --> 00:06:37,850 ‫You can see how they are working, so this there has its own batting. 99 00:06:38,210 --> 00:06:40,220 ‫That is why we are facing the space. 100 00:06:40,410 --> 00:06:43,400 ‫But I hope you got the idea how we are going to divide things. 101 00:06:44,120 --> 00:06:47,860 ‫OK, this looks great, but maybe I want to divide them equally. 102 00:06:47,870 --> 00:06:50,570 ‫So you don't need to utilize this Caltex context. 103 00:06:50,720 --> 00:06:52,910 ‫If they are equal, you can see a column column. 104 00:06:53,330 --> 00:06:55,730 ‫And then they will be divided automatically. 105 00:06:55,760 --> 00:06:56,390 ‫You can see. 106 00:06:57,020 --> 00:06:59,330 ‫But if you want something else, maybe you want. 107 00:06:59,360 --> 00:07:01,070 ‫OK, I need three for this. 108 00:07:02,400 --> 00:07:07,860 ‫We have to take delegates so we can see three for the first one and nine for the other one. 109 00:07:09,130 --> 00:07:16,090 ‫Jamaica, you can see three for the first one, nine for the yellow one, you can do individuals, maybe 110 00:07:16,090 --> 00:07:22,840 ‫you have this one, maybe you have this one and we can copy multiple times. 111 00:07:26,200 --> 00:07:30,220 ‫Suppose you have to then you will have one one one for each one of them. 112 00:07:30,520 --> 00:07:31,120 ‫Get back here. 113 00:07:31,120 --> 00:07:34,970 ‫You can see one one one one because we only added four. 114 00:07:35,320 --> 00:07:40,140 ‫And that's how you can add content and you don't need to capture the entire screen. 115 00:07:40,140 --> 00:07:42,070 ‫Maybe you need only two for this one. 116 00:07:42,400 --> 00:07:43,720 ‫And forward for this one. 117 00:07:44,020 --> 00:07:47,000 ‫That means we are only going to last 50 percent space. 118 00:07:47,440 --> 00:07:49,530 ‫That will be two and four. 119 00:07:49,540 --> 00:07:50,240 ‫That is six. 120 00:07:50,290 --> 00:07:52,960 ‫Get back here, you can see two and four. 121 00:07:53,650 --> 00:07:58,240 ‫So that's how we are going to work with this holy grail column thing. 122 00:07:58,870 --> 00:08:03,640 ‫Now this brings us tons of concept and talk about the topic that we will discuss. 123 00:08:03,640 --> 00:08:07,030 ‫Don't worry, but remember, this can be done in glorious concept. 124 00:08:08,200 --> 00:08:10,000 ‫So I hope you got the best idea. 125 00:08:10,360 --> 00:08:16,870 ‫Now I really wanted to continue this topic only, so in the next lecture, we are going to discuss green 126 00:08:16,880 --> 00:08:22,720 ‫itself, how this is going to work with responsive manner, how we can utilize our break point. 127 00:08:22,720 --> 00:08:31,560 ‫For example, if I try to minimize this, I want as soon as I touch maybe 700 pixels, that is my empty 128 00:08:31,570 --> 00:08:32,200 ‫break point. 129 00:08:32,560 --> 00:08:35,500 ‫This need to be added on something like this. 130 00:08:36,100 --> 00:08:38,230 ‫We can do a lot of things with bootstrap. 131 00:08:38,260 --> 00:08:40,510 ‫So in the next lecture, let us continue this. 132 00:08:41,140 --> 00:08:42,640 ‫I hope this one was helpful. 133 00:08:42,880 --> 00:08:45,730 ‫Thank you for calling, and I see you guys in the next one.