1<div class="container-sm">100% wide until small breakpoint</div>
2<div class="container-md">100% wide until medium breakpoint</div>
3<div class="container-lg">100% wide until large breakpoint</div>
4<div class="container-xl">100% wide until extra large breakpoint</div>
5<div class="container-xxl">100% wide until extra extra large breakpoint</div>
6
1$container-max-widths: (
2 sm: 540px,
3 md: 720px,
4 lg: 960px,
5 xl: 1140px,
6 xxl: 1320px
7);
8
1// Source mixin
2@mixin make-container($padding-x: $container-padding-x) {
3 width: 100%;
4 padding-right: $padding-x;
5 padding-left: $padding-x;
6 margin-right: auto;
7 margin-left: auto;
8}
9
10// Usage
11.custom-container {
12 @include make-container();
13}
14