Remove card decks in favor of the grid

twbs · Nov 16, 2019 · a83362a · a83362a
1 parent ade1538
commit a83362a
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 110 deletions.
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -150,30 +150,6 @@
 }
 
 
-// Card deck
-
-.card-deck {
-  .card {
-    margin-bottom: $card-deck-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -$card-deck-margin;
-    margin-left: -$card-deck-margin;
-
-    .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-right: $card-deck-margin;
-      margin-bottom: 0; // Override the default
-      margin-left: $card-deck-margin;
-    }
-  }
-}
-
-
 //
 // Card groups
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -958,7 +958,6 @@ $card-bg:                           $white !default;
 $card-img-overlay-padding:          1.25rem !default;
 
 $card-group-margin:                 $grid-gutter-width / 2 !default;
-$card-deck-margin:                  $card-group-margin !default;
 
 
 // Tooltips

diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md
@@ -531,83 +531,13 @@ When using card groups with footers, their content will automatically line up.
 </div>
 {{< /example >}}
 
-### Card decks
-
-Need a set of equal width and height cards that aren't attached to one another? Use card decks.
-
-{{< example >}}
-<div class="card-deck">
-  <div class="card">
-    {{< placeholder width="100%" height="200" 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>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    </div>
-  </div>
-  <div class="card">
-    {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
-    <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    </div>
-  </div>
-  <div class="card">
-    {{< placeholder width="100%" height="200" 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 wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    </div>
-  </div>
-</div>
-{{< /example >}}
-
-Just like with card groups, card footers in decks will automatically line up.
-
-{{< example >}}
-<div class="card-deck">
-  <div class="card">
-    {{< placeholder width="100%" height="180" 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 wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    </div>
-    <div class="card-footer">
-      <small class="text-muted">Last updated 3 mins ago</small>
-    </div>
-  </div>
-  <div class="card">
-    {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
-    <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-    </div>
-    <div class="card-footer">
-      <small class="text-muted">Last updated 3 mins ago</small>
-    </div>
-  </div>
-  <div class="card">
-    {{< placeholder width="100%" height="180" 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 wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-    </div>
-    <div class="card-footer">
-      <small class="text-muted">Last updated 3 mins ago</small>
-    </div>
-  </div>
-</div>
-{{< /example >}}
-
 ### Grid cards
 
 Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout/grid#row-columns" >}}) to control how many grid columns (wrapped around your cards) you show per row. For example, here's `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
 
 {{< example >}}
-<div class="row row-cols-1 row-cols-md-2">
-  <div class="col mb-4">
+<div class="row row-cols-1 row-cols-md-2 g-3">
+  <div class="col">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -616,7 +546,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
       </div>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -625,7 +555,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
       </div>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -634,7 +564,7 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
       </div>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -649,8 +579,8 @@ Use the Bootstrap grid system and its [`.row-cols` classes]({{< docsref "/layout
 Change it to `.row-cols-3` and you'll see the fourth card wrap.
 
 {{< example >}}
-<div class="row row-cols-1 row-cols-md-3">
-  <div class="col mb-4">
+<div class="row row-cols-1 row-cols-md-3 g-3">
+  <div class="col">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -659,7 +589,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
       </div>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -668,7 +598,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
       </div>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -677,7 +607,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
       </div>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col">
     <div class="card">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -692,8 +622,8 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
 When you need equal height, add `.h-100` to the cards. If you want equal heights by default, you can set `$card-height: 100%` in Sass.
 
 {{< example >}}
-<div class="row row-cols-1 row-cols-md-3">
-  <div class="col mb-4">
+<div class="row row-cols-1 row-cols-md-3 g-3">
+  <div class="col">
     <div class="card h-100">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -702,7 +632,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
       </div>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col">
     <div class="card h-100">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -711,7 +641,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
       </div>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col">
     <div class="card h-100">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -720,7 +650,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
       </div>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col">
     <div class="card h-100">
       {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
       <div class="card-body">
@@ -732,6 +662,49 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
 </div>
 {{< /example >}}
 
+Just like with card groups, card footers will automatically line up.
+
+{{< example >}}
+<ul class="row g-3">
+  <li class="col-sm">
+    <div class="card h-100">
+      {{< placeholder width="100%" height="180" 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 wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+      <div class="card-footer">
+        <small class="text-muted">Last updated 3 mins ago</small>
+      </div>
+    </div>
+  </li>
+  <li class="col-sm">
+    <div class="card h-100">
+      {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      </div>
+      <div class="card-footer">
+        <small class="text-muted">Last updated 3 mins ago</small>
+      </div>
+    </div>
+  </li>
+  <li class="col-sm">
+    <div class="card h-100">
+      {{< placeholder width="100%" height="180" 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 wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+      </div>
+      <div class="card-footer">
+        <small class="text-muted">Last updated 3 mins ago</small>
+      </div>
+    </div>
+  </li>
+</ul>
+{{< /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/migration.md b/site/content/docs/4.3/migration.md
@@ -114,6 +114,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 ### Cards
 
 - Removed the card columns in favor of a Masonry grid [See #28922](https://github.com/twbs/bootstrap/pull/28922).
+- Removed card decks in favor of the grid which adds more flexibility over responsive behaviour.
 
 ### Jumbotron