‫Hey, dad.
‫Welcome back.
‫Now in this lecture, let us discuss about layoffs, so there are few points that are important like
‫break points, container grade column and a few other things.
‫So the first thing I want to discuss is great point.
‫Now, by default, we have been working with mediocrities, so we have several great points.
‫Maybe at Boyland Excel related to be exact.
‫Then we have around 760 age than we have around 500 or 400.
‫So that are different break points and why we use them to customize our responsiveness.
‫For example, if I just scroll down or right click here, and if I try to just see how this is going
‫to work, you will get an understanding that why these whole customization regarding responsiveness
‫is important.
‫So there are few break points with our bootstrap.
‫The first one is everything greater than 576 eSIM, everything greater than 768 M.D., everything greater
‫than 992 and everything greater than 100.
‫Excellent.
‫And then double excel.
‫So these are important.
‫Why?
‫Because we can mention things that I want this property greater than 768 pixel.
‫Or maybe I want so Dana, that property greater, then maybe 200 pixel.
‫So these are cheat code, basically, and they are going to die.
‫Is them a lot?
‫Don't worry, we are going to jump back on to this topic again.
‫But let me jump on to the other one which just contain.
‫Now, similarly, we have three points.
‫We need some type of container container to keep everything inside and have some distance on left and
‫right side.
‫So when I click here and if I jump on to, I mean, you can see I have some distance from left and right
‫because of this whole container thing.
‫Now what is this container?
‫It's simple.
‫If I use container property, it is going to restrict my width of my content.
‫So maybe I'm using a screen for 576 pixel.
‫My container will take only 540 pixel and the remaining space will be denoted for margin.
‫If I'm using a screen of seven six in, my screen will be restricted towards 720 only and the remaining
‫48 pixels will be utilized for margins.
‫And it keeps on falling.
‫Now it's good time for us to understand this whole S.M.A.R.T thing.
‫It's important now.
‫So when I see Container Dash, maybe that means I need to start this property from this empty break
‫point.
‫That means anything greater than 768.
‫So if I see a container empty, it will not work for small screen.
‫It will only work with bigger screen bigger than 768.
‫If I see a container and that means it will start once we reach this LG, which is 992 pixels, and
‫that's how this is going to work.
‫Now here you will also understand about new dawn, which is fluid, and that means I just flow basically
‫200 percent for all these screens.
‫I hope you got the idea.
‫Now, the next one is great.
‫Another important concept, and I want to discuss about this topic one example.
‫So for now, let's jump here now here I'm going to give this dude a glass of container because now we
‫have some information so I can directly use container.
‫Save this one.
‫Get back here.
‫You can see now I'm utilizing a fix work and I have some space on both the side, left and right.
‫Thanks to our container.
‫Now what is this great and how do you today's test?
‫The basic example is our complete screen.
‫This whole screen from this point to this point is divided into two groups.
‫Now don't confuse test with this great topic.
‫No, it's different and specific to bootstrap.
‫Don't mix or adopt them here and bootstrap.
‫Our screen is divided into 12 parts.
‫Now I can call this according to law.
‫So here, maybe I want these two, I want to utilize these two.
‫So suppose I have this only see.
‫Yep.
‫So I want to utilize only these two content and let me remove this border.
‫No, I just need to explain the container and this whole to.
‫So we have everything inside our container, and we can now utilize this default grade, which is good
‫bootstrap, and I can say, OK, I need to use this six grade only and then the remaining six is for
‫the other element.
‫That means you have to l grade anything on your screen.
‫You are utilizing phone, you are utilizing, I mean, time off screen, you have to integrate according
‫to bootstrap, and you can define content within these 12 grades.
‫For example, inside a container.
‫I can take a roll as we are going to build this whole row.
‫And then we are going to divide them into different column.
‫Or I should say great.
‫So let's say here I take.
‫Drew?
‫So this is our complete row, according to Bootstrap.
‫Now I can divide them into different columns and I can see the first six column will be for this element
‫and the next six column will be for this element.
‫OK.
‫This looks great.
‫So what I can do is I can utilize call Dash six.
‫OK.
‫And I'm going to take this back and keep this inside this.
‫And had I can again, a corner shakes and I can take this feedback and keep this inside this day and
‫save this one.
‫So basically, what happened is we have created this rule, and inside this role, we have divided the
‫first six grade or column who are Peter and the next six great column or another Peter out.
‫And if I jump back here, you can see this is the first one and this is the second one.
‫And if I right click here.
‫You can see how they are working, so this there has its own batting.
‫That is why we are facing the space.
‫But I hope you got the idea how we are going to divide things.
‫OK, this looks great, but maybe I want to divide them equally.
‫So you don't need to utilize this Caltex context.
‫If they are equal, you can see a column column.
‫And then they will be divided automatically.
‫You can see.
‫But if you want something else, maybe you want.
‫OK, I need three for this.
‫We have to take delegates so we can see three for the first one and nine for the other one.
‫Jamaica, you can see three for the first one, nine for the yellow one, you can do individuals, maybe
‫you have this one, maybe you have this one and we can copy multiple times.
‫Suppose you have to then you will have one one one for each one of them.
‫Get back here.
‫You can see one one one one because we only added four.
‫And that's how you can add content and you don't need to capture the entire screen.
‫Maybe you need only two for this one.
‫And forward for this one.
‫That means we are only going to last 50 percent space.
‫That will be two and four.
‫That is six.
‫Get back here, you can see two and four.
‫So that's how we are going to work with this holy grail column thing.
‫Now this brings us tons of concept and talk about the topic that we will discuss.
‫Don't worry, but remember, this can be done in glorious concept.
‫So I hope you got the best idea.
‫Now I really wanted to continue this topic only, so in the next lecture, we are going to discuss green
‫itself, how this is going to work with responsive manner, how we can utilize our break point.
‫For example, if I try to minimize this, I want as soon as I touch maybe 700 pixels, that is my empty
‫break point.
‫This need to be added on something like this.
‫We can do a lot of things with bootstrap.
‫So in the next lecture, let us continue this.
‫I hope this one was helpful.
‫Thank you for calling, and I see you guys in the next one.