There is space inside any container div and its inner content.

[monaSalih]

Hello everyone, I'm from Jordan. I'm currently working on a project for Orange, and we used Boosted. I noticed that there is always a default space between any container div and its inner content. On the other hand, when I used the normal Bootstrap link in the head, the inner content takes the full width. This is part of Boosted?
in attached file left side for boosted output and right side for bootstrap output

[julien-deramond]

Hello @monaSalih

in attached file left side for boosted output and right side for bootstrap output

Apparently, there was an issue while uploading the file, I can't see it in your post. Could you please try to re-upload it? Or maybe try to create a minimal reproducible example via CodePen, StackBlitz, or any other tools?

[monaSalih]

sure, following code for bootstrap and for boosted you can see the gap inside "container-fluid" class in boosted
Boosted: https://codepen.io/monasalih/pen/zYQwEwB
bootstrap: https://codepen.io/monasalih/pen/MWdmEvY

[julien-deramond]

Thanks for your CodePen examples in #2564 (reply in thread).

I noticed that there is always a default space between any container div and its inner content. On the other hand, when I used the normal Bootstrap link in the head, the inner content takes the full width. This is part of Boosted?

Yes indeed, the behavior is slightly different in Boosted compared to Bootstrap:

• https://boosted.orange.com/docs/5.3/layout/containers/#how-they-work:

  .container-fluid, which sets the width: 100% and overrides max-width: 100vw - $breakpoint_margin at all breakpoints

• https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work:

  .container-fluid, which is width: 100% at all breakpoints

This was done to ensure consistency with the current design rules linked to the header and footer max widths (that are not supposed to use 100% of the screen's width). It's not that natural, I agree, but was probably the most consistent approach we could have in the framework to keep the same classes between Boosted and Bootstrap.

If you need to force it, you can probably associate it to the .mw-100 class to force a max-width: 100%.

[monaSalih]

Many thanks for your response, much appreciated.