Add Additional Bootstrap 4 Container Size

Lately, I’ve been doing a lot of work with Bootstrap 4 and I’ve found the largest “container” size of 1140px to be a little constraining on really larger screens. I wanted to add an additional breakpoint and container size beyond that. By working with the Sass files, we can change some mappings and not write any CSS to get this behavior.

There are two mappings we need to modify.

Default Values

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Modified Breakpoints and Container Sizes

To get the behavior we want, we’re going to add another breakpoint size (xxl) and define a container max width for that breakpoint.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1590px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1560px
);

Result

Now once our screen is 1590px wide, our container will grow to 1560px.

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.