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
.
Leave a Reply