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 fdbe95f404d6c5d5b47dd4dc6a95fa9f384eea73..5cca2ae283c6d14d0d452c6e21c2500921176671 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -168,6 +168,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/docs/4.3/components/card.md b/site/docs/4.3/components/card.md
index fa9c6ffc151bfb0d66b2a4a78a4ad549c66140a9..7d04f451616fcdc3d1eb17a174227552b8b0e8cd 100644 (file)
--- a/site/docs/4.3/components/card.md
+++ b/site/docs/4.3/components/card.md
@@ -621,6 +621,94 @@ Just like with card groups, card footers in decks will automatically line up.
 {% endcapture %}
 {% include example.html content=example %}
 
+### 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.
+
+{% capture example %}
+<div class="row row-cols-2">
+  <div class="col">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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">
+      {% include icons/placeholder.svg 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">
+      {% include icons/placeholder.svg 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">
+      {% include icons/placeholder.svg 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>
+{% endcapture %}
+{% include example.html content=example %}
+
+{% capture example %}
+<div class="row row-cols-3">
+  <div class="col">
+    <div class="card mb-4">
+      {% include icons/placeholder.svg 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">
+      {% include icons/placeholder.svg 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">
+      {% include icons/placeholder.svg 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">
+      {% include icons/placeholder.svg 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>
+{% endcapture %}
+{% include example.html content=example %}
+
 ### Card columns
 
 Cards can be organized into [Masonry](https://masonry.desandro.com/)-like columns with just CSS by wrapping them in `.card-columns`. Cards are built with CSS `column` properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

diff --git a/site/docs/4.3/layout/grid.md b/site/docs/4.3/layout/grid.md
index f214841ccdb9d8686db2b557e907c02acc940696..f03808044c2465d9f5358fae358339325413d9c2 100644 (file)
--- a/site/docs/4.3/layout/grid.md
+++ b/site/docs/4.3/layout/grid.md
@@ -333,6 +333,54 @@ Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoi
 {% endcapture %}
 {% include example.html content=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">
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+</div>
+
+<div class="bd-example-row">
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+</div>
+
+<div class="bd-example-row">
+{% capture 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>
+{% endcapture %}
+{% include example.html content=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)