From 964811d48d1e9b2c12d356163d9f3cfcbf758c8f Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 11 May 2016 20:22:07 -0700
Subject: [PATCH 1/6] Update card header and footer

- Remove the box-shadow and switch back to border to match .card basics
- Update the header nav margin override--since we restored the border, we need that default negative margin at the bottom
---
 scss/_card.scss | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/scss/_card.scss b/scss/_card.scss
index 0b6a0aa030..fdc5998de5 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 {

From f68b06a12368d3fbe79a41f26311cbcf11b85670 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 11 May 2016 20:32:20 -0700
Subject: [PATCH 2/6] Update card variants

- Remove background-color from header and footer in inverse cards (fixes #19841)
- Update border override for header and footer in cards; only need to declare a new color
- Update the selector for targetting blockquote footers in cards
---
 scss/mixins/_cards.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss
index 1ce28f1ceb..bad98327d1 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,7 @@
   }
   .card-link,
   .card-text,
-  .card-blockquote > footer {
+  .card-blockquote .blockquote-footer {
     color: rgba(255,255,255,.65);
   }
   .card-link {

From 5ff8d0f66ea818e6f95ce421f17f6ea0ca41e81d Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 11 May 2016 20:41:33 -0700
Subject: [PATCH 3/6] Fixes #19840: Invert the .card-subtitle color as well for
 .card-inverse

---
 scss/mixins/_cards.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scss/mixins/_cards.scss b/scss/mixins/_cards.scss
index bad98327d1..574349abad 100644
--- a/scss/mixins/_cards.scss
+++ b/scss/mixins/_cards.scss
@@ -32,6 +32,7 @@
   }
   .card-link,
   .card-text,
+  .card-subtitle,
   .card-blockquote .blockquote-footer {
     color: rgba(255,255,255,.65);
   }

From de91c5e0be65fe3f9063305e583cc66cd02ec169 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 11 May 2016 21:18:35 -0700
Subject: [PATCH 4/6] fixes #19650: improve non-flexbox card deck behavior so
 columns are always the same width

---
 scss/_card.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_card.scss b/scss/_card.scss
index fdc5998de5..fd0280a9e9 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -214,12 +214,12 @@
     $space-between-cards: (2 * $card-deck-margin);
     .card-deck {
       display: table;
+      width: 100%;
       table-layout: fixed;
       border-spacing: $space-between-cards 0;
 
       .card {
         display: table-cell;
-        width: 1%;
         vertical-align: top;
       }
     }

From 56a5b19cdb63e1e76478a628eab774b0c3e93f98 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 11 May 2016 22:14:05 -0700
Subject: [PATCH 5/6] Fixes #17911: Explicitly remove margin-bottom from cards
 in .card-deck

Here we're doing some margin swapping, so it looks a little funky. All this does is match the margin implementation and rendering across our table and flex versions of card decks.
---
 scss/_card.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/scss/_card.scss b/scss/_card.scss
index fd0280a9e9..a419d4d08d 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -190,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) {
@@ -200,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;
       }
     }
@@ -215,11 +222,13 @@
     .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;
+        margin-bottom: 0; // Margin balancing
         vertical-align: top;
       }
     }

From e70f7162ece502a0ff683bc6100fcae5613caaad Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 11 May 2016 23:13:52 -0700
Subject: [PATCH 6/6] Fix #17511 by adding mention to the docs for how to
 extend the card columns

---
 docs/components/card.md | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs/components/card.md b/docs/components/card.md
index 86c555abb3..992f4a138e 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 %}