Set container max width to XXL breakpoint Bootstrap 5

Question

I am trying out Bootstrap 5, on my site I do not want the container to grow beyond 1200px which is the XL breakpoint. Is there a way to either remove the XXL breakpoint or simply tell it not to grow beyond the XL breakpoint.

Preferably within my own custom CSS sheet rather than using SaSS/Less.

Answer 1

Here's the sass answer for completeness sake: To remove the breakpoint from compiling in sass (including all utilities like col-xxl-*) override the default variables $grid-breakpoints and $container-max-widths and remove xxl from the array like so:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Make sure to include this before including bootstrap.

Answer 2

Just set max-width on the .container...

.container {
    max-width: 1200px;
}

https://codeply.com/p/R0Y9RwNzqP