Merge pull request #19885 from twbs/v4-cards

v4: Card improvements

3 files changed, 35 insertions, 15 deletions

diff --git a/docs/components/card.md b/docs/components/card.md
index 86c555abb..992f4a138 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -508,7 +508,7 @@ Only applies to small devices and above.
 
 ## Columns
 
-Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`. 
+Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Cards are ordered from top to bottom and left to right when wrapped in `.card-columns`.
 
 Only applies to small devices and above.
 
@@ -576,3 +576,16 @@ Only applies to small devices and above.
   </div>
 </div>
 {% endexample %}
+
+Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
+
+{% highlight scss %}
+.card-columns {
+  @include media-breakpoint-only(lg) {
+    column-count: 4;
+  }
+  @include media-breakpoint-only(xl) {
+    column-count: 5;
+  }
+}
+{% endhighlight %}
diff --git a/scss/_card.scss b/scss/_card.scss
index 0b6a0aa03..a419d4d08 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -71,9 +71,7 @@
   @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
-  // border-bottom: $card-border-width solid $card-border-color;
-  // Doesn't use mixin so that cards always have a "border"
-  box-shadow: inset 0 0 0 $card-border-width $card-border-color;
+  border-bottom: $card-border-width solid $card-border-color;
 
   &:first-child {
     @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
@@ -84,9 +82,7 @@
   @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
-  // border-top: $card-border-width solid $card-border-color;
-  // Doesn't use mixin so that cards always have a "border"
-  box-shadow: inset 0 0 0 $card-border-width $card-border-color;
+  border-top: $card-border-width solid $card-border-color;
 
   &:last-child {
     @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
@@ -103,10 +99,6 @@
   margin-bottom: -$card-spacer-y;
   margin-left: -($card-spacer-x / 2);
   border-bottom: 0;
-
-  .nav-item {
-    margin-bottom: 0;
-  }
 }
 
 .card-header-pills {
@@ -198,9 +190,14 @@
 }
 
 
-//
 // Card set
 //
+// Heads up! We do some funky style resetting here for margins across our two
+// variations (one flex, one table). Individual cards have margin-bottom by
+// default, but they're ignored due to table styles. For a consistent design,
+// we've done the same to the flex variation.
+//
+// Those changes are noted by `// Margin balancing`.
 
 @if $enable-flex {
   @include media-breakpoint-up(sm) {
@@ -208,11 +205,13 @@
       display: flex;
       flex-flow: row wrap;
       margin-right: -$card-deck-margin;
+      margin-bottom: $card-spacer-y; // Margin balancing
       margin-left: -$card-deck-margin;
 
       .card {
         flex: 1 0 0;
         margin-right: $card-deck-margin;
+        margin-bottom: 0; // Margin balancing
         margin-left: $card-deck-margin;
       }
     }
@@ -222,12 +221,14 @@
     $space-between-cards: (2 * $card-deck-margin);
     .card-deck {
       display: table;
+      width: 100%;
+      margin-bottom: $card-spacer-y; // Margin balancing
       table-layout: fixed;
       border-spacing: $space-between-cards 0;
 
       .card {
         display: table-cell;
-        width: 1%;
+        margin-bottom: 0; // Margin balancing
         vertical-align: top;
       }
     }
diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss
index 1ce28f1ce..574349aba 100644
--- a/scss/mixins/_cards.scss
+++ b/scss/mixins/_cards.scss
@@ -3,6 +3,11 @@
 @mixin card-variant($background, $border) {
   background-color: $background;
   border-color: $border;
+
+  .card-header,
+  .card-footer {
+    background-color: transparent;
+  }
 }
 
 @mixin card-outline-variant($color) {
@@ -17,7 +22,7 @@
 @mixin card-inverse {
   .card-header,
   .card-footer {
-    border-bottom: $card-border-width solid rgba(255,255,255,.2);
+    border-color: rgba(255,255,255,.2);
   }
   .card-header,
   .card-footer,
@@ -27,7 +32,8 @@
   }
   .card-link,
   .card-text,
-  .card-blockquote > footer {
+  .card-subtitle,
+  .card-blockquote .blockquote-footer {
     color: rgba(255,255,255,.65);
   }
   .card-link {