From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Thu, 19 Dec 2019 15:15:57 +0000 (+0100)
Subject: Add row-cols-auto and responsive variants
X-Git-Tag: v5.0.0-alpha1~373
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=fca5e35d137a48c94d7a990b2f98a6e3e29d0a87;p=thirdparty%2Fbootstrap.git

Add row-cols-auto and responsive variants
---

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index aa71a39a26..35283207d3 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -65,6 +65,10 @@
         min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410
       }
 
+      .row-cols#{$infix}-auto > * {
+        @include make-col-auto();
+      }
+
       @for $i from 1 through $grid-row-columns {
         .row-cols#{$infix}-#{$i} {
           @include row-cols($i);
diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md
index 3ca2131197..82ee25f1f6 100644
--- a/site/content/docs/4.3/layout/grid.md
+++ b/site/content/docs/4.3/layout/grid.md
@@ -280,7 +280,7 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
 
 ### Row columns
 
-Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut.
+Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut. With `.row-cols-auto` you can give the columns their natural width.
 
 Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
 
@@ -306,6 +306,17 @@ Use these row columns classes to quickly create basic grid layouts or to control
 </div>
 {{< /example >}}
 
+{{< example class="bd-example-row" >}}
+<div class="container">
+  <div class="row row-cols-auto">
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+  </div>
+</div>
+{{< /example >}}
+
 {{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row row-cols-4">