v4/v5: Add responsive containers (#29095)

* create responsive containers

provide more flexibility and allow the user to determine when containers switch from fluid to fixed width.

* fix the base container code

this commit fixes the non-media portion of the generated CSS. I learned about the `@extends` directive and was able to put it to good use.

I create a new temporary map that contains all the main `$container-max-widths` and join it to our 2 special cases of 'xs' and 'fluid'.  Then we loop through that and, with the appropriate infixes, extend our placeholder

* formatting for style

forgot to run my tests before the last push, i think these are better.

* finish incomplete comment

* fix the responsive containers

using the `@extend` directive I was able to clean up this code

* fix responsive containers in the navbar

mostly we just look through all of our breakpoints so we can include all of the responsive container classes in the tweaks we have to do for the navbar (redeclaring flex properties, don't double up on padding, etc)

* Simplify container extends

* Simplify navbar containers

* Rearrange, add comments, ensure everything is nested in $enable-grid-classes

* Reduce new CSS by using attribute selector

We avoid using `@extend` whenever possible, and this is more readable

* Update _grid.scss

* Update _navbar.scss

* Add docs for responsive containers, redesign the container layout page

* Add to the Grid example

diff --git a/scss/_grid.scss b/scss/_grid.scss
index a227515379c4bd9979039bc0e86ca3626123b96b..f70e849517cf6997cdad5025e3568a52905ed79d 100644 (file)
--- a/scss/_grid.scss
+++ b/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.

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 2b57ae53ac3e95fd028249233d196e32f8d211aa..beb6f2bf0009246c3c4added0db5467c45797a95 100644 (file)
--- a/scss/_navbar.scss
+++ b/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;
         }
 

diff --git a/site/content/docs/4.3/examples/grid/grid.css b/site/content/docs/4.3/examples/grid/grid.css
index e726996d31b673fe814aa9643e840187b6903812..8032c31c3e2edbaa07ae5354e0228a81008f1110 100644 (file)
--- a/site/content/docs/4.3/examples/grid/grid.css
+++ b/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);
+}

diff --git a/site/content/docs/4.3/examples/grid/index.html b/site/content/docs/4.3/examples/grid/index.html
index 230fd6a57b0640f395455513027f07482e4578b3..24289cea52cc4373163d5c35db37d1433aab6c67 100644 (file)
--- a/site/content/docs/4.3/examples/grid/index.html
+++ b/site/content/docs/4.3/examples/grid/index.html
@@ -125,3 +125,13 @@ include_js: false
   </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>

diff --git a/site/content/docs/4.3/layout/overview.md b/site/content/docs/4.3/layout/overview.md
index dd2f34691512266e45f3f81324929c935af5000e..79b799ca0dcea56ab6ee8b832aec3959a09bf9b3 100644 (file)
--- a/site/content/docs/4.3/layout/overview.md
+++ b/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
 

diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss
index 8b7a3bab85fc84a3ae48f13736858c5e1d7a7935..60f59423212b016fae1fa25148b2e443876a4e1c 100644 (file)
--- a/site/static/docs/4.3/assets/scss/_component-examples.scss
+++ b/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);
 }