Set container max width to XXL breakpoint Bootstrap 5

user_2820781 0
Viewed 2934

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.

bootstrap-5 css
2 Answers
user_1714560

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.

user_9433370
Related