[Summary view] [Print] [Text view]

   1  // Container widths
   2  //
   3  // Set the container width, and override it for fixed navbars in media queries.
   4  
   5  @if $enable-grid-classes {
   6    // Single container class with breakpoint max-widths
   7    .container,
   8    // 100% wide container at all breakpoints
   9    .container-fluid {
  10      @include make-container();
  11    }
  12  
  13    // Responsive containers that are 100% wide until a breakpoint
  14    @each $breakpoint, $container-max-width in $container-max-widths {
  15      .container-#{$breakpoint} {
  16        @extend .container-fluid;
  17      }
  18  
  19      @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
  20        %responsive-container-#{$breakpoint} {
  21          max-width: $container-max-width;
  22        }
  23  
  24        // Extend each breakpoint which is smaller or equal to the current breakpoint
  25        $extend-breakpoint: true;
  26  
  27        @each $name, $width in $grid-breakpoints {
  28          @if ($extend-breakpoint) {
  29            .container#{breakpoint-infix($name, $grid-breakpoints)} {
  30              @extend %responsive-container-#{$breakpoint};
  31            }
  32  
  33            // Once the current breakpoint is reached, stop extending
  34            @if ($breakpoint == $name) {
  35              $extend-breakpoint: false;
  36            }
  37          }
  38        }
  39      }
  40    }
  41  }