in this video. We're gonna talk about how we can, you know, we can use the container. What is a container in the tailwind. So usually when you, when we talk about the container, a container is something which contains all the the html text. It's a class. So we can apply the container. I mean inside this return, we can simply delete whatever we have and we can create a bit here and this big can be the container tag which will be containing everything we have in the any application. So anyway, um you know, when you're learning the Children, there is a high chance, you know, the container and you may be coming from the, you know, the back, the background of the bootstrap or something like that. So, um when we talk about the container in the tail wind, it is a little different but you know, we're gonna absolutely learn that because it's it's the utility First framework, we had a discussion on it. So it's as a container, the container is actually going to contain the code, but if you want to, you know, centralize the code, I mean the centralized page or you know, adding the padding or something like that, you're absolutely going to have to choose some other options and we're gonna learn that. So right here, if I go to this installed tailwind, um actually this is the Children website. We do not need to install it anymore. We've already got it at the right at the, at the left side menu, you can see that the documentation, the components. I'm in the documentation here. It is the lady in the layout. This is the aspect ratio and this is a container. The container is all about the layout. You know, we are we are now first we're going to talk about creating the layout. So this is the layout. I'm going to click on the container now and in the container there is the, you know, um this is a container component component for fixing and elements with to the current breakpoint. Okay. The containers class sets the max without an element to match the min width of the current breakpoint in the CDC CDC. But this is an important thing. You know, the container absolutely does whatever it is. But note that unlike containers you might have used in other frameworks, tailwinds, container does not center itself automatically and does not have any built in horizontal padding. So it it absolutely not won't do the central thing and anything but there is a utility which we can use to make it work. I'm going there back and I'm applying the container class name and I'm going to write the container and I'm going to save it and I'm gonna write something here like you know, I'm I'm gonna create it. Um This is a container. I'm going to write something like that. The feel wind and next Js I'm gonna save it, going back to the browser and here you can see that the texas here then what the container is doing it actually you know when you don't put any breakpoint we're going to talk about the breakpoint too but We put nothing so the video is automatically the you know 100%. And these are the breakpoints and we're not talking about the break points right now but we're talking about why the content is not in the center to make the content in the center. We need to we need to use the Mx auto. So with the tailwind the container actually does one thing. It makes David as 100% and it makes the layout fluid. Or you can say the liquid nothing more than that. If you want to add the the you know the padding, horizontal padding so you just have to choose some of the you have to do some other things in the container. It it's not going to do it by its own way. So there is a method if you want to put the horizontal padding you can use this style. Anyway I'm gonna go with the Mx auto. Mx means you know the margin auto and the margin X. X. Means the y. The X. Axis. So we're talking about the making the horizontal margin as auto. So I'm simply going to go there and I'm going to write after a new space. Mx auto. Save it go back to the browser and go there and you got it you know with the Mx auto and this is absolutely now um in a different position. Anyway I'm going to do something more because you know B. G. rose and this time I'm going to put the 400 and I'm going to go back. Okay. Yeah that is totally fine by doing the M. S. Auto. Actually it didn't pick the content. This content as you know it just made the container itself as centered not the you know um um you know uh putting the content in the center. So I thought I'm going to have the content in the center. That was around assumption anyway okay if you want to add some additional you know the the padding things inside the text because in the general if you if you talk about the bootstrap we can put some padding. So uh we we actually get the padding with the container but this is not the bootstrap. So to add the padding we need to put the P. The P. Four padding. M. Four margin. So we've applied the margin. Now P for padding. So we're gonna apply some padding. I'm gonna copy that and I'm gonna go there and I'm gonna simply put the padding like you know PX four. So I'm talking about this is the Mx auto. The PX four means I mean you know the four is the level, we're gonna absolutely talk about this level later but just applying right now going to the browser and you can see that there are absolutely some extra padding. If I delete that, you are going to see there is no padding and it is just you know as connected to the wall. So if I put it so the P X four is gives gives us gives it a little space before that and if I type only piece, so it's gonna apply to the X and Y. Both accesses. Now I'm going back and you can see that the margin is the padding is here, the padding is here and the padding is there too. So absolutely, this is how this is exactly how you can make the container similarly to the bootstrap. Now you may be thinking that this is not a very ideal way because in the bootstrap you just put the container and uh you do not need to write all these things. I mean these things to why it is here because again this is the motto of the uh the Children that it is uh the you know uh the utility first. So because it is utility first you just you can see that um to put any utility you have to call the utility instead of having a package thing. So this is uh in the bootstrap it is that is not a utility first framework. It is the futility first framework. So you have to put the utilities to do that. So it doesn't make you confused anyway. So I think we just talked about the basic logic of the container. Now there is a few more things for example. Yeah, that is an interesting one. If I put the break point, this is a break point. You can see that the M. D. The sm the LG the excel, the to excel. So there it is the putting the MD before the container. This way if I do that like this, I'm gonna have some change. You can actually not now. But if I make it as m save it. Mm hmm. Let me okay copy. Save it close to the browser. Mm hmm. I guess if I put the L G lg lg save it. Mm hmm. Something is changing. I think I'm gonna put it right here. Yeah. Now it's going to make the point. Okay. Actually this oh don't don't do that. Don't do that. Just simply go there. Okay, so the thing is it's a responsive variant. So now this because of this size, the LG won't work. Only the MD, possibly the MD would work now M. D. And yeah, you can see that now that is working okay. So what the thing happening here when I made it MD containers? So only the actually this is the M. D. This is this is the MD pattern. That is why the MD was working. So because it is the MD so before the, you know when the sizes is M. D. This would apply, this would be applied the container. The Mx auto. But the size when the sizes, L. G. This wouldn't be applied. Okay? So if I write L. D. Obviously this screen is not LG so it's not gonna apply. Okay? So you can see that, this is how it works. So if you want it for the, you can say the media query you if you want it for the sm you can apply the sm if you want it for the extra large screen, if you have the big screen. So absolutely you can apply that for the big screen. So this is a break point and uh okay. Um there is one more thing which is uh which I think, which I think is kind of interesting that if you want, you know, it doesn't make it, you know, and make it the center one. So you can see that we have to put the Mx auto. But there is one more cool thing. I mean let's talk about this too. Um If you want to, you know, set the, you know, default standards. So you want to get the uh the container in the center by default, we do not want that, but maybe you want, so you just can go to the tailwind dot conflict dot Js, which is right here, Children dot conflict dot Js. And in this file, in the theme, in the theme that you know, in the theme you can uh instead of the extend, just make it here, just make it here and in the theme you can create another one, like the container. And you can put this command and the content will be automatically centered and not that, but you can do a lot of more things like the padding, this is the padding, you can do the padding and you can set the default size for the padding for the sm you can set the default size is I mean this is how you can set the default tenders in the in the Children. So I think it is cool and uh we're I think we've talked about the container enough. So in the next video we're absolutely going to talk about something more until then stay tuned.