‫Hey, there.
‫Welcome back.
‫Now let us continue our great bar in the previous lecture, every discussion about this column.
‫That means we have to edit great points and we can divide them, according to these numbers, according
‫to this column.
‫Now remember, I have also mentioned that we can utilize any number of ways that can be won.
‫But what happens if we only have one column that means we only have this one call?
‫If I save this one and if I jump back, it makes complete site.
‫That means by default, this column is going to take complete.
‫Do I look great?
‫Are there a lot of things that we can do?
‫We can utilize the knowledge of breakpoint and then customize that, OK, I need six for this and six
‫for this.
‫And as soon as we squeeze, I need something else.
‫OK, great.
‫So let me get back to our default one, which is six and six.
‫Looks good now.
‫Currently, we have these two.
‫Now let me also use one quick property just green, please on site so I can use on site, and there
‫are one two three four five with utilities, so I can see one that will be pretty big.
‫So on site is Dash one.
‫Save this one.
‫Get back here.
‫Now you can see it's bigger, so this looks great.
‫But as soon as I squeeze this one, things get in trouble.
‫I want something like, I want them to go in a responsive.
‫And I can use my bootstrap knowledge.
‫What I can do is I can just follow and I can how options regarding access, S.M. Energy Excel as well
‫as access, and now I strongly recommend to watch these lectures in full screen because I cannot assume
‫more than this if I try to.
‫Zoom had this whole bootstrap website will not be visible.
‫Clearly, there will be removal of these sidebars and few other things.
‫So I strongly recommend just watch these lectures in full screen.
‫Now, when these break coins, we can customize that.
‫OK, follow this six by six only when we are greater than M.D., for example, if I see here on Dash,
‫M.D., Dash six, as well as with my second there, and if I save this one, what it is going to do
‫is it is going to divide in six only when we are greater than this M.D. we just 776 or whatever the
‫Pixel is.
‫If I jump out with just 768 pixel so greater than 768 pixel.
‫We are going to divide them into two parts and rest of the time we are going to have the complete two
‫grades.
‫Remember Greta, then M.D. That means 768 pixel.
‫We are going to divide them into two parts.
‫And if I jump here, you can see currently we are in two parts.
‫If I click on Inspect and if I go below, remember, check here.
‫Seven, six eight.
‫As soon as we go below seven six it, they are capturing well with completely.
‫Now I can do more fun.
‫Since I have big screen, I can see.
‫Let's take different properties together.
‫I can see.
‫Maybe energy three.
‫And similarly, here I can take.
‫Call 89.
‫So that means we are now following two properties greater than our energy, which is, I guess, 992
‫pixels so greater than nine Bexhill give this bear three grades and give this grade nine grades.
‫But as soon as we decrease from or I should say we are less than 992 Vixen, we will follow this property.
‫So let me jump back here.
‫This is currently 992 pixel greater than 992 Pixel.
‫So this is three and this is nine.
‫But as soon as I start decreasing the size.
‫Keep an eye on the size.
‫Now you can see this a six and six.
‫As soon as we are less than nine 92% now again, as soon as I'm less than me, this is going to be complete
‫default value, which is great.
‫So that's all.
‫You can control a lot of thing without writing any type of mediocrity.
‫And this is going to work really well when we are going to design these type of section.
‫OK, I hope you got the idea.
‫Now here you can scroll and check out the other examples, and they are similar example, but very different
‫called value and a few other things.
‫OK, let's call up.
‫Click on this column part, and by default, this whole thing is Colleen Flexbox, something like this
‫so you can scroll and hey, you can again have an option about a line item, start a line item, center
‫line items.
‫And if you have knowledge about Flexbox, you know all of this so you can arrange things with justified
‫content as well as line items.
‫This is great.
‫Now, the next thing is about capping, so this gap is important, and if you remember about grid system,
‫which is this is great, you remember about the gap or column gap, if you remember about Flexbox,
‫you know about these things that you can add gap between these two.
‫So these are the basic things.
‫If you know about CIUSSS, these are just cheap.
‫Now, then comes this utility section again, which is important, and here you can remember this dome
‫as utility fallout.
‫Now, what does this is when we build, when we build any type, what layout we need information about
‫batting, we need some type of margin.
‫So these are the common things when you are walking with maybe Flexbox, when we are walking with great
‫or any type of content.
‫We need margin padding and few other content.
‫So if I jump on to my utility now again, and if you jump here with spacing while you can directly click
‫here.
‫So if I jump on spacing now, you will see how do utilize margin and padding?
‫Everything is short hand, remember.
‫So when you are walking around margin and padding, you use shortcuts like m b, then you can define
‫where you want to add.
‫If you say M Dash five, that mean margin five.
‫Also, if you say b Dash five that mean padding on all side, but you can specify which direction m
‫d will be margin top and B will be margin bottom.
‫Then there is S, which is four left inside.
‫Remember start this site and write inside.
‫So then we have and then you have a combination of both horizontal so left and right horizontal line.
‫So it is going to be x then combination of vertical lines, which is top and bottom, which is why I
‫remember if I say just m, that means it is going to apply on all the four sides.
‫OK, this sounds great.
‫And similarly, we have a zero two five value.
‫We have auto and everything, but let's try to apply here.
‫But the second box?
‫So if I jump and jump on to my second box.
‫So if I utilize padding speed now, remember left and right.
‫So if I want to add lift, I can say B.
‫S Dash five and if I save this one.
‫Remember SS four start, which is left and E is for N, which is padding right.
‫And if I get like here, you can see we have five and if I right click, click on to the code, but
‫you can see five.
‫And if I scroll down, you can see five is padding left.
‫Three run.
‫OK, I hope you got the idea.
‫OK, now we can do a lot of other things, we can play with it, maybe let me, I'd just be so if I
‫simply the five, that means on all directions here you can see how this b five is going to work.
‫Similarly, we have options with margin.
‫I can play with margin Myanmar into this debate and I can see margin right.
‫That is it.
‫And then let's say to save this one.
‫You can see from here we have two, but now we are following the grid system.
‫So this needs some type of grid, which is nine grid to are just that it is going to scroll down.
‫Let's suppose of the grid requirement was just three.
‫So it is going to have just had only because it has option or three grid.
‫This is important this is the top most priority content, understand about B, understand about these
‫BBC X Y and also understand about the break points.
‫Now if you want this margin thing, only one screened.
‫So for example, if I remove this for now, this margin here and that said, this is going to be nine.
‫OK.
‫Everything is normal again.
‫But I want this binding only when my screen is greater than empty.
‫That means when my screen is empty, which is 768 pixel.
‫If my screen is greater than that, I'm going to apply this five padding.
‫So at this point of time, it is greater than 768.
‫When asked when as I decrease.
‫You can see at this point of time, we have.
‫But as soon as I decrease code below 768.
‫It's gone, so this fighting is gone.
‫Let's assume so, and that could be something related to 500.
‫So currently we have we have this as soon as I decrease.
‫Let me check the break point or them, which is 576, so as soon as I go below 576, you can see this
‫is gone.
‫So this binding will be applied greater than this S.M., which is 576.
‫Now, you don't need to remember this point.
‫You will understand about them.
‫I keep in mind look, if somewhere around 570 or somewhere around 770, something like that, you don't
‫need to remember the exact point.
‫I hope you got the idea how to utilize this whole margin and batting team.
‫OK.
‫That's all that's done for the basics.
‫Now we just need to jump and talk about company so they know if you remember, I discussed about fuel
‫points, utility and layout.
‫Now the two points are remaining, which is component as well as bombs.
‫So let's continue this topic in the next one.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.