Adjust Container max width

I want to change the width of the container class from 1170px to 1360px. What’s the best way update the container widths and keep things responsive? I’m kind of new to using Sass so it’s not imminently obvious to me what I need to adjust.

You do it in assets/styles/common/_variables.scss.

These are the default container sizes, adjust them accordingly.

//== Container sizes
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
$container-tablet:             (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

// Large screen / wide desktop
$container-large-desktop:      (1140px + $grid-gutter-width) !default;
//** For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop !default;

For a full list of available variables, check out bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss.

1 Like

Thanks for the response, that cleared things up for me :smiley:

This topic was automatically closed after 6 hours. New replies are no longer allowed.