SCSS
@mixin make-container-fluid-left-right($gutter: $grid-gutter-width) {
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
}
@mixin make-container-fluid-left($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) {
margin-right: calc((100% - #{$container-max-width}) / 2);
width: calc(100% - ((100% - #{$container-max-width}) / 2));
}
}
}
@mixin make-container-fluid-right($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) {
margin-left: calc((100% - #{$container-max-width}) / 2);
width: calc(100% - ((100% - #{$container-max-width}) / 2));
}
}
}
.container-fluid-left {
@include make-container-fluid-left-right();
@include make-container-fluid-left();
}
.container-fluid-right {
@include make-container-fluid-left-right();
@include make-container-fluid-right();
}