v4/v5: Add responsive containers

scss/_grid.scss

@@ -3,23 +3,32 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 @if $enable-grid-classes {
+  // Single container class with breakpoint max-widths
   .container {
     @include make-container();
     @include make-container-max-widths();
   }
-}
-
-// Fluid container
-//
-// Utilizes the mixin meant for fixed width containers, but with 100% width for
-// fluid, full width layouts.
 
-@if $enable-grid-classes {
+  // 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} {
+      @include make-container();
+    }
+
+    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+      .container-#{$breakpoint} {
+        max-width: $container-max-width;
+      }
+    }
+  }
 }
 
+
 // Row
 //
 // Rows contain and clear the floats of your columns.

scss/_navbar.scss

@@ -25,8 +25,7 @@
 
   // Because flex properties aren't inherited, we need to redeclare these first
   // few properties so that content nested within behave properly.
-  > .container,
-  > .container-fluid {
+  > [class^="container"] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -140,8 +139,7 @@
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
-        > .container,
-        > .container-fluid {
+        > [class^=".container"] {
           padding-right: 0;
           padding-left: 0;
         }
@@ -165,8 +163,7 @@
         }
 
         // For nesting containers, have to redeclare for alignment purposes
-        > .container,
-        > .container-fluid {
+        > [class^=".container"] {
           flex-wrap: nowrap;
         }
 

site/content/docs/4.3/examples/grid/grid.css

@@ -4,3 +4,10 @@
   background-color: rgba(86, 61, 124, .15);
   border: 1px solid rgba(86, 61, 124, .2);
 }
+
+.themed-container {
+  padding: 15px;
+  margin-bottom: 30px;
+  background-color: rgba(0, 123, 255, .15);
+  border: 1px solid rgba(0, 123, 255, .2);
+}

site/content/docs/4.3/examples/grid/index.html

@@ -125,3 +125,13 @@ <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
   </div>
 
 </div>
+
+<div class="container">
+  <h2 class="mt-4">Responsive containers</h2>
+  <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
+</div>
+
+<div class="container-sm themed-container">.container-sm</div>
+<div class="container-md themed-container">.container-md</div>
+<div class="container-lg themed-container">.container-lg</div>
+<div class="container-xl themed-container">.container-xl</div>

site/content/docs/4.3/layout/overview.md

@@ -9,15 +9,15 @@ toc: true
 
 ## Containers
 
-Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time).
+Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. While containers *can* be nested, most layouts do not require a nested container.
 
-While containers *can* be nested, most layouts do not require a nested container.
+### All-in-one
+
+Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.
 
 <div class="bd-example">
-  <div class="bd-example-container">
-    <div class="bd-example-container-header"></div>
-    <div class="bd-example-container-sidebar"></div>
-    <div class="bd-example-container-body"></div>
+  <div class="example-container-element col-6 p-3 mx-auto">
+    .container
   </div>
 </div>
 
@@ -27,13 +27,13 @@ While containers *can* be nested, most layouts do not require a nested container
 </div>
 {{< /highlight >}}
 
+### Fluid
+
 Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
 
 <div class="bd-example">
-  <div class="bd-example-container bd-example-container-fluid">
-    <div class="bd-example-container-header"></div>
-    <div class="bd-example-container-sidebar"></div>
-    <div class="bd-example-container-body"></div>
+  <div class="example-container-element p-3">
+    .container-fluid
   </div>
 </div>
 
@@ -43,6 +43,25 @@ Use `.container-fluid` for a full width container, spanning the entire width of
 </div>
 {{< /highlight >}}
 
+### Responsive
+
+Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until particular breakpoint is reached and a `max-width` is applied. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will remain through the higher breakpoints.
+
+<div class="bd-example">
+  <div class="example-container-element p-3 mb-3">
+    .container-sm (100% wide until breakpoint)
+  </div>
+  <div class="example-container-element col-6 p-3 mx-auto">
+    .container-sm (With max-width at breakpoint)
+  </div>
+</div>
+
+{{< highlight html >}}
+<div class="container-sm">100% wide until small breakpoint</div>
+<div class="container-md">100% wide until medium breakpoint</div>
+<div class="container-lg">100% wide until large breakpoint</div>
+<div class="container-xl">100% wide until extra large breakpoint</div>
+{{< /highlight >}}
 
 ## Responsive breakpoints
 

site/static/docs/4.3/assets/scss/_component-examples.scss

@@ -30,6 +30,15 @@
   border: 1px solid rgba($bd-purple, .15);
 }
 
+.bd-example-responsive-containers {
+  [class^="container"] {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    background-color: rgba(86, 61, 124, .15);
+    border: 1px solid rgba(86, 61, 124, .2);
+  }
+}
+
 // Grid mixins
 .example-container {
   width: 800px;
@@ -69,37 +78,9 @@
 // Container illustrations
 //
 
-.bd-example-container {
-  min-width: 16rem;
-  max-width: 25rem;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.bd-example-container-header {
-  height: 3rem;
-  margin-bottom: .5rem;
-  background-color: lighten($blue, 50%);
-  @include border-radius;
-}
-
-.bd-example-container-sidebar {
-  float: right;
-  width: 4rem;
-  height: 8rem;
-  background-color: lighten($blue, 25%);
-  @include border-radius;
-}
-
-.bd-example-container-body {
-  height: 8rem;
-  margin-right: 4.5rem;
-  background-color: lighten($bd-purple, 25%);
-  @include border-radius;
-}
-
-.bd-example-container-fluid {
-  max-width: none;
+.example-container-element {
+  background-color: rgba($blue, .25);
+  border: 1px solid rgba($blue, .25);
 }