Rename `.col-xs` to `.col` + some other cleanup (#21222)

* Use `breakpoint-min` instead of a counter

* Remove 'xs' from flexbox grid

diff --git a/docs/assets/scss/_featured-sites.scss b/docs/assets/scss/_featured-sites.scss
index 2fb0839f046ef6d5138f344cc8a366276cd0f1cb..b0964a91e189b9fddda079364863b2fec6c7cb28 100644 (file)
--- a/docs/assets/scss/_featured-sites.scss
+++ b/docs/assets/scss/_featured-sites.scss
@@ -2,7 +2,7 @@
   margin-right: -1px;
   margin-left: -1px;
 }
-.bd-featured-sites .col-xs-6 {
+.bd-featured-sites .col-6 {
   padding: 1px;
 }
 .bd-featured-sites .img-fluid {

diff --git a/docs/assets/scss/_responsive-tests.scss b/docs/assets/scss/_responsive-tests.scss
index edba088c69e57c4dce5f228023de56d811120937..7b1b500b38eb2bba0fee44c41a7b1f91e7442065 100644 (file)
--- a/docs/assets/scss/_responsive-tests.scss
+++ b/docs/assets/scss/_responsive-tests.scss
@@ -35,7 +35,7 @@
 .responsive-utilities-test {
   margin-top: .25rem;
 }
-.responsive-utilities-test .col-xs-6 {
+.responsive-utilities-test .col-6 {
   margin-top: .5rem;
   margin-bottom: .5rem;
 }
@@ -50,7 +50,7 @@
 }
 .visible-on,
 .hidden-on {
-  .col-xs-6 {
+  .col-6 {
     > .not-visible {
       color: #999;
       border: 1px solid #ddd;
@@ -59,7 +59,7 @@
 }
 .visible-on,
 .hidden-on {
-  .col-xs-6 {
+  .col-6 {
     .visible {
       color: #468847;
       background-color: #dff0d8;

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 482392504127c17f3724d7615c17677966ec7fc8..c6430424a1dbe2e6dedfc7d48189f52b9c8cd3de 100644 (file)
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -43,21 +43,21 @@ For example, here are two grid layouts that apply to every device and viewport,
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 2
     </div>
-    <div class="col-xs">
+    <div class="col">
       1 of 2
     </div>
   </div>
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
   </div>
@@ -73,24 +73,24 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
     <div class="col-6">
       2 of 3 (wider)
     </div>
-    <div class="col-xs">
+    <div class="col">
       3 of 3
     </div>
   </div>
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
     <div class="col-5">
       2 of 3 (wider)
     </div>
-    <div class="col-xs">
+    <div class="col">
       3 of 3
     </div>
   </div>
@@ -106,24 +106,24 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
 {% example html %}
 <div class="container">
   <div class="row flex-items-md-center">
-    <div class="col-xs col-lg-2">
+    <div class="col col-lg-2">
       1 of 3
     </div>
     <div class="col-12 col-md-auto">
       Variable width content
     </div>
-    <div class="col-xs col-lg-2">
+    <div class="col col-lg-2">
       3 of 3
     </div>
   </div>
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
     <div class="col-12 col-md-auto">
       Variable width content
     </div>
-    <div class="col-xs col-lg-2">
+    <div class="col col-lg-2">
       3 of 3
     </div>
   </div>
@@ -158,35 +158,35 @@ Use the flexbox alignment utilities to vertically align columns.
 {% example html %}
 <div class="container">
   <div class="row flex-items-top">
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
   </div>
   <div class="row flex-items-middle">
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
   </div>
   <div class="row flex-items-bottom">
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
   </div>
@@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs flex-top">
+    <div class="col flex-top">
       One of three columns
     </div>
-    <div class="col-xs flex-middle">
+    <div class="col flex-middle">
       One of three columns
     </div>
-    <div class="col-xs flex-bottom">
+    <div class="col flex-bottom">
       One of three columns
     </div>
   </div>
@@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs flex-unordered">
+    <div class="col flex-unordered">
       First, but unordered
     </div>
-    <div class="col-xs flex-last">
+    <div class="col flex-last">
       Second, but last
     </div>
-    <div class="col-xs flex-first">
+    <div class="col flex-first">
       Third, but first
     </div>
   </div>

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 8de8ccf469a577fe1b04067fd068343fd8ecb980..68d7f702039af934b8a82cada6dc1b2e72c1c1f5 100644 (file)
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -100,7 +100,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Class prefix</th>
-        <td><code>.col-xs-</code></td>
+        <td><code>.col-</code></td>
         <td><code>.col-sm-</code></td>
         <td><code>.col-md-</code></td>
         <td><code>.col-lg-</code></td>
@@ -329,7 +329,7 @@ Using a single set of `.col-md-*` grid classes, you can create a basic grid syst
 
 ### Example: Mobile and desktop
 
-Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
+Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
 
 <div class="bd-example-row">
 {% example html %}
@@ -385,6 +385,7 @@ Here's the source code for creating these styles. Note that column overrides are
   margin-right: 0;
   margin-left: 0;
 
+  > .col,
   > [class*="col-"] {
     padding-right: 0;
     padding-left: 0;

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 9235ace0566034a29b4ffea713701692aa7f074f..8c7a9ee3188e183f5240c2ef6432bc4e5954ac60 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -35,6 +35,7 @@
     margin-right: 0;
     margin-left: 0;
 
+    > .col,
     > [class*="col-"] {
       padding-right: 0;
       padding-left: 0;

diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 4216ee30c3a23ac393350971ad1187b414bde94e..6ea2e7882dc5c36ce2c77e5037a3351855e35fa8 100644 (file)
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -17,27 +17,29 @@
     @include make-gutters($gutters);
   }
 
-  $breakpoint-counter: 0;
   @each $breakpoint in map-keys($breakpoints) {
+    // Logic is a little reversed here: `breakpoint-min` returns false when it's the smallest breakpoint.
+    $min: not breakpoint-min($breakpoint, $breakpoints);
 
-    $breakpoint-counter: ($breakpoint-counter + 1);
-
-    @if $breakpoint-counter == 1 {
-      @for $i from 1 through $columns {
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 1 through $columns {
+      @if $min {
         .col-#{$i} {
           @extend %grid-column;
         }
+      } @else {
+        .col-#{$breakpoint}-#{$i} {
+          @extend %grid-column;
+        }
       }
     }
-
-    @if $breakpoint-counter != 1 {
-      // Allow columns to stretch full width below their breakpoints
-      .col-#{$breakpoint} {
-        @extend %grid-column;
-      }
-
-      @for $i from 1 through $columns {
-        .col-#{$breakpoint}-#{$i} {
+    @if $enable-flex {
+      @if $min {
+        .col {
+          @extend %grid-column;
+        }
+      } @else {
+        .col-#{$breakpoint} {
           @extend %grid-column;
         }
       }
@@ -46,24 +48,35 @@
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       @if $enable-flex {
-        .col-#{$breakpoint} {
-          flex-basis: 0;
-          flex-grow: 1;
-          max-width: 100%;
-        }
-       .col-#{$breakpoint}-auto {
-          flex: 0 0 auto;
-          width: auto;
+        @if $min {
+          .col {
+            flex-basis: 0;
+            flex-grow: 1;
+            max-width: 100%;
+          }
+          .col-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+        } @else {
+          .col-#{$breakpoint} {
+            flex-basis: 0;
+            flex-grow: 1;
+            max-width: 100%;
+          }
+          .col-#{$breakpoint}-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
         }
       }
 
       @for $i from 1 through $columns {
-        @if $breakpoint-counter == 1 {
+        @if $min {
           .col-#{$i} {
             @include make-col($i, $columns);
           }
-        }
-        @if $breakpoint-counter != 1 {
+        } @else {
           .col-#{$breakpoint}-#{$i} {
             @include make-col($i, $columns);
           }
@@ -72,12 +85,11 @@
 
       @each $modifier in (pull, push) {
         @for $i from 0 through $columns {
-          @if $breakpoint-counter == 1 {
+          @if $min {
             .#{$modifier}-#{$i} {
               @include make-col-modifier($modifier, $i, $columns)
             }
-          }
-          @if $breakpoint-counter != 1 {
+          } @else {
             .#{$modifier}-#{$breakpoint}-#{$i} {
               @include make-col-modifier($modifier, $i, $columns)
             }
@@ -87,17 +99,16 @@
 
       // `$columns - 1` because offsetting by the width of an entire row isn't possible
       @for $i from 0 through ($columns - 1) {
-        @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
-           @if $breakpoint-counter == 1 {
-              .offset-#{$i} {
-                @include make-col-modifier(offset, $i, $columns)
-              }
-           }
-           @if $breakpoint-counter != 1 {
-              .offset-#{$breakpoint}-#{$i} {
-                @include make-col-modifier(offset, $i, $columns)
-              }
-           }
+        @if not $min or $i != 0 { // Avoid emitting useless .offset-xs-0
+          @if $min {
+            .offset-#{$i} {
+              @include make-col-modifier(offset, $i, $columns)
+            }
+          } @else {
+            .offset-#{$breakpoint}-#{$i} {
+              @include make-col-modifier(offset, $i, $columns)
+            }
+          }
         }
       }
     }