First pass at .row-cols classes

Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too.

diff --git a/scss/_card.scss b/scss/_card.scss
index f68855c56ccdaa76be37958455993edf1fbb9c38..93858592624b690341ca522ebdf9640a9f644615 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -175,6 +175,18 @@
   }
 }
 
+$row-columns: 6 !default;
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @for $i from 1 through $row-columns {
+    .row-cols#{$infix}-#{$i} > [class^="col"] {
+      flex: 0 0 calc(100% / #{$i});
+    }
+  }
+}
+
 
 //
 // Card groups

diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md
index a3b64dc5714e5d9d39fd259c0e23666b3c32b30f..4f789fc6fde927439f3aff150b2d00c02a2ee4a7 100644 (file)
--- a/site/content/docs/4.3/components/card.md
+++ b/site/content/docs/4.3/components/card.md
@@ -601,6 +601,92 @@ Just like with card groups, card footers in decks will automatically line up.
 </div>
 {{< /example >}}
 
-### Card columns (Masonry layout)
+### Grid cards
+
+Use the Bootstrap grid system and its [`.rol-cols` classes]() to control how many grid columns (wrapped around your cards) you show per row.
+
+{{< example >}}
+<div class="row row-cols-2">
+  <div class="col">
+    <div class="card mb-4">
+      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card mb-4">
+      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card mb-4">
+      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card mb-4">
+      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+{{< example >}}
+<div class="row row-cols-3">
+  <div class="col">
+    <div class="card mb-4">
+      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card mb-4">
+      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card mb-4">
+      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="card mb-4">
+      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+### Masonry
 
 In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.

diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md
index 9ea65e80714239ffffc4b31e996f51437049e379..372f68e738f5869b888877d967b8b43f9ea90ba0 100644 (file)
--- a/site/content/docs/4.3/layout/grid.md
+++ b/site/content/docs/4.3/layout/grid.md
@@ -324,6 +324,51 @@ Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoi
 </div>
 {{< /example >}}
 
+### 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 these row columns classes to quickly create basic grid layouts or to control your card layouts.
+
+<div class="bd-example-row">
+{{< example >}}
+<div class="container">
+  <div class="row row-cols-2">
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+  </div>
+</div>
+{{< /example >}}
+</div>
+
+<div class="bd-example-row">
+{{< example >}}
+<div class="container">
+  <div class="row row-cols-3">
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+  </div>
+</div>
+{{< /example >}}
+</div>
+
+<div class="bd-example-row">
+{{< example >}}
+<div class="container">
+  <div class="row row-cols-4">
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+    <div class="col">Column</div>
+  </div>
+</div>
+{{< /example >}}
+</div>
+
 ## Alignment
 
 Use flexbox alignment utilities to vertically and horizontally align columns. **Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a `min-height` as shown below.** [See Flexbugs #3 for more details.](https://github.com/philipwalton/flexbugs#flexbug-3)