How can I change container max-widths via Sass variables?

Asked on Jul 25, 2025

1 Answer

In Bootstrap 5, you can customize the container max-widths by overriding the default Sass variables. This allows you to set your own breakpoints and container widths.

<!-- BEGIN COPY / PASTE -->
        $container-max-widths: (
            sm: 540px,
            md: 720px,
            lg: 960px,
            xl: 1140px,
            xxl: 1320px
        );

        @import "bootstrap/scss/bootstrap";
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `$container-max-widths` map to set custom widths for each breakpoint.
Ensure you import Bootstrap after defining your custom variables to apply changes.
This approach requires setting up a Sass environment to compile your custom Bootstrap CSS.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions