Whats the best way to make a container be max-width:1140px

[scottw12]

We are working on a website and I need to lock the "container" tag to "container-xl" and have "container-fluid" be 100%.
how do we access that new Bootstrap feature for container sizes.

I don't not want my editors to be able to create wider content that 1140px;

[meetmandeep]

What exactly is the use case? You cannot manually fiddle with Bootstrap classes such as "container-xl". If all you're trying to accomplish is have a single column that is max 1140px wide then add a grid w/1 Column and set it to Fixed vs. Fluid.

[scottw12]

I cant use container-xl . That's THE problem.... And I know plenty about about Bootstrap I've been using it since it was V2. BTW 1140 is the usable area after you take into consideration of the default padding and margins.
https://getbootstrap.com/docs/5.0/layout/containers/
I am going to post another thread asking how I can use image-fluid? These are why I wanted a class field in the styling area. Am I soo tired figuring this out that I cant see straight. Here is a use case look at https://demos4u.com/development_folders/jcesba/1.htm

I want the content width to max at 1200px except when I want the content to go full width. Worked fine with BS4 as CONTAINER is 1140px However now CONTAINER is different for each media break so the width goes past 1200px.

So I guess my original question could simply read "How can a use container-xl on a section?

And since I have your attention :-) How can we use media breaks I need to have some content right aligned and left aligned on mobile.
Thanks for your time. I may sometimes stretch your patience I do apologize for that.

[scottw12]

If it was just me doing this I would have no problem setting widths and such. But I will have content editors and I want to lock them down to that 1200px wide max...period and not have to worry about them about getting out of that section.

[meetmandeep]

So I guess my original question could simply read "How can a use container-xl on a section?

Ability to add your own classes is on roadmap. See #381

I am going to post another thread asking how I can use image-fluid?

See: https://www.youtube.com/watch?v=emMFlLOtDTQ&list=PLLwyyJ9_yNldtZSl_pEIGcko8JNQhSN3U

How can we use media breaks I need to have some content right aligned and left aligned on mobile.

See: https://www.youtube.com/watch?v=Z2q0JqoxS40&list=PLLwyyJ9_yNldtZSl_pEIGcko8JNQhSN3U

But I will have content editors and I want to lock them down to that 1200px wide max...period

There is no option to restrict functionality at this time. Either you give a content editor "EDIT" rights to the page or restrict them to a specific app on the page. Anyone that has "EDIT" rights has creative freedom to modify the page with the exception of any Global Blocks on that page.

[meetmandeep]

Take a look at https://dev.jcesba.org/ the logo reduces horizontally but not vertically. With "img-fluid" it would reduce both ways and stay in resolution.

That has nothing to do with "img-fluid". The logo only reduces horizontally because you have a "height" defined on the logo.

[scottw12]

I set all size to auto.. minimize the screen to about mobile size open it back up and VANJARO has changes the sizes...I would set something to 133.991px. Is this a bug?

[scottw12]

Yes I did publish. close the persona bar. recued the width of the browser. looked at the settings again and now the size has changed to

[meetmandeep]

Yes. Looks like a bug. Add it to issues. It's possible that log must have a fixed width/height but I'll let the design team chime in on that.

[scottw12]

In the mean time I am going to throw a max-width on container via !important in custom styles to solve the 1200px problem.
I just hate changing the core scaffolding when it isn't broke.
I will also remove the logo block and see if that fixes the logo problem. And add issue. Thanks for your time.