Container-{breakpoint} generated only if $enable-bootstrap-compatibility is true. Re-integrate the documentation for $enable-bootstrap-compatibility, with the generation of xxl breakpoint.

Author: hannahiss

scss/_containers.scss

@@ -3,43 +3,49 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 @if $enable-container-classes {
-  // Single container class with breakpoint max-widths
-  .container,
   // 100% wide container at all breakpoints
   .container-fluid {
     @include make-container();
   }
 
-  // Responsive containers that are 100% wide until a breakpoint
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    .container-#{$breakpoint} {
-      @extend .container-fluid;
+  @if $enable-bootstrap-compatibility { // OUDS mod
+    // OUDS mod
+    // Single container class with breakpoint max-widths
+    .container {
+      @include make-container();
     }
+    // End mod
 
-    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-      %responsive-container-#{$breakpoint} {
-        max-width: $container-max-width;
+    // Responsive containers that are 100% wide until a breakpoint
+    @each $breakpoint, $container-max-width in $container-max-widths {
+      .container-#{$breakpoint} {
+        @extend .container-fluid;
       }
 
-      // Extend each breakpoint which is smaller or equal to the current breakpoint
-      $extend-breakpoint: true;
+      @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+        %responsive-container-#{$breakpoint} {
+          max-width: $container-max-width;
+        }
 
-      @each $name, $width in $grid-breakpoints {
-        @if ($extend-breakpoint) {
-          .container#{breakpoint-infix($name, $grid-breakpoints)} {
-            @extend %responsive-container-#{$breakpoint};
-          }
+        // Extend each breakpoint which is smaller or equal to the current breakpoint
+        $extend-breakpoint: true;
+
+        @each $name, $width in $grid-breakpoints {
+          @if ($extend-breakpoint) {
+            .container#{breakpoint-infix($name, $grid-breakpoints)} {
+              @extend %responsive-container-#{$breakpoint};
+            }
 
-          // Once the current breakpoint is reached, stop extending
-          @if ($breakpoint == $name) {
-            $extend-breakpoint: false;
+            // Once the current breakpoint is reached, stop extending
+            @if ($breakpoint == $name) {
+              $extend-breakpoint: false;
+            }
           }
         }
       }
     }
   }
 
-  // OUDS mod
   // scss-docs-start containers-max
   .container-max-width {
     @include media-breakpoint-up(get-breakpoint-from-width()) {

scss/_functions.scss

@@ -12,7 +12,7 @@
       // Do nothing
     } @else if not comparable($prev-num, $num) {
       @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    } @else if $prev-num >= $num {
+    } @else if $prev-num > $num {
       @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
     }
     $prev-key: $key;

scss/_maps.scss

@@ -194,11 +194,6 @@ $grid-gutter-widths: (
 ) !default;
 // scss-docs-end grid-gutters
 
-@if $enable-bootstrap-compatibility {
-  // Copy 2xl breakpoint into xxl breakpoint
-  $gutters: map-merge($gutters, ("xxl": map-get($gutters, "2xl")));
-}
-
 // scss-docs-start gutters
 $gutters: (
   none: 0,
@@ -216,6 +211,10 @@ $gutters: (
 ) !default;
 // scss-docs-end gutters
 
+@if $enable-bootstrap-compatibility {
+  // Add Bootstrap gutters
+  $gutters: map-merge($gutters, $spacers);
+}
 // End mod
 
 $alert-colors: map-remove($theme-colors, "primary", "secondary", "light", "dark") !default; // OUDS mod

scss/_variables.scss

@@ -564,7 +564,11 @@ $grid-breakpoints: (
 
 @if $enable-bootstrap-compatibility {
   // Copy 2xl breakpoint into xxl breakpoint
-  $grid-breakpoints: map-merge($grid-breakpoints, ("xxl": map-get($grid-breakpoints, "2xl")));
+  $breakpoint-2xl: map-get($grid-breakpoints, 2xl);
+  $breakpoint-3xl: map-get($grid-breakpoints, 3xl);
+  $grid-breakpoints: map-remove($grid-breakpoints, 2xl, 3xl);
+  $grid-breakpoints: map-merge($grid-breakpoints, (xxl: $breakpoint-2xl, 2xl: $breakpoint-2xl, 3xl: $breakpoint-3xl));
+  @debug $grid-breakpoints;
 }
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");