• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Programming / Add Additional Bootstrap 4 Container Size

Add Additional Bootstrap 4 Container Size

Last updated on July 30, 2018 by Sal Ferrarello

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
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.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Programming, Solution Tagged With: Bootstrap, Sass

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in