From 74d17ab7a025cc05784c9fb69b91264bb08a46b8 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 28 May 2015 14:07:34 -0700
Subject: [PATCH] rewrite much of cards and the docs

---
 docs/components/card.md | 300 +++++++++++++++++++++++++---------------
 scss/_card.scss         | 170 ++++++++++++++++-------
 scss/_list-group.scss   |  15 +-
 3 files changed, 320 insertions(+), 165 deletions(-)

diff --git a/docs/components/card.md b/docs/components/card.md
index 8b53d3fc65..1a7a2aaca8 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -7,56 +7,96 @@ A **card** is a flexible and extensible content container. It includes options f
 
 If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
 
-## Basic example
+## Example
 
-Cards require very little markup, but do require some additional classes to give you as much control as possible. Create a `.card`, add any heading with `.card-title`, and use `.card-text` on paragraphs. These classes ensure proper spacing and alignment.
+Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease.
 
 {% example html %}
 <div class="card">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="btn btn-primary">Button</a>
+  </div>
+</div>
+{% endexample %}
+
+## Content types
+
+Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
+
+{% example html %}
+<div class="card">
+  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+  <div class="card-block">
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="card">
+  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <div class="card-block">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="card">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="card">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <h6 class="card-subtitle text-muted">Support card subtitle</h6>
+  </div>
+  <img data-src="holder.js/100%x180/?text=Image" alt="Card image">
+  <div class="card-block">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
 </div>
 {% endexample %}
 
 ## Sizing
 
-Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via custom styles, our predefined grid classes, or our grid mixins.
-
-Using the card size variations:
-
-{% example html %}
-<div class="card card-sm">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
-</div>
-<div class="card card-md">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
-</div>
-<div class="card card-lg">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
-</div>
-{% endexample %}
-
+Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via inline styles, our predefined grid classes, or with custom styles using our grid mixins.
 
 Using the grid:
 
 {% example html %}
 <div class="row">
   <div class="col-sm-6">
-    <div class="card">
+    <div class="card card-block">
       <h3 class="card-title">Special title treatment</h3>
       <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
   </div>
   <div class="col-sm-6">
-    <div class="card">
+    <div class="card card-block">
       <h3 class="card-title">Special title treatment</h3>
       <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -68,7 +108,7 @@ Using the grid:
 Using custom widths:
 
 {% example html %}
-<div class="card" style="width: 20rem;">
+<div class="card card-block" style="width: 20rem;">
   <h3 class="card-title">Special title treatment</h3>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -80,19 +120,19 @@ Using custom widths:
 You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]().
 
 {% example html %}
-<div class="card">
+<div class="card card-block">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 
-<div class="card text-center">
+<div class="card card-block text-center">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 
-<div class="card text-right">
+<div class="card card-block text-right">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -108,19 +148,23 @@ Add an optional header and/or footer within a card.
   <div class="card-header">
     Featured
   </div>
-  <h4 class="card-title">Special title treatment</h4>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+  <div class="card-block">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
 </div>
 
 <div class="card">
   <div class="card-header">
     Quote
   </div>
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 {% endexample %}
 
@@ -129,9 +173,11 @@ Add an optional header and/or footer within a card.
   <div class="card-header">
     Featured
   </div>
-  <h4 class="card-title">Special title treatment</h4>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+  <div class="card-block">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
   <div class="card-footer text-muted">
     2 days ago
   </div>
@@ -141,10 +187,12 @@ Add an optional header and/or footer within a card.
   <div class="card-header">
     Quote
   </div>
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
   <div class="card-footer text-muted">
     2 days ago
   </div>
@@ -157,16 +205,20 @@ Similar to headers and footers, cards include top and bottom image caps.
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/240x180/" alt="Card image cap">
-  <h4 class="card-title">Card title</h4>
-  <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>
-  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <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>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
 </div>
 <div class="card">
-  <h4 class="card-title">Card title</h4>
-  <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>
-  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-  <img class="card-img-bottom" data-src="holder.js/240x180/" alt="Card image cap">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <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>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+  <img class="card-img-bottom" data-src="holder.js/100%x180/" alt="Card image cap">
 </div>
 {% endexample %}
 
@@ -191,9 +243,11 @@ Cards include a class for quickly toggling the text color. By default, cards use
 
 {% example html %}
 <div class="card card-inverse" style="background-color: #333; border-color: #333;">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+  <div class="card-block">
+    <h3 class="card-title">Special title treatment</h3>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Button</a>
+  </div>
 </div>
 {% endexample %}
 
@@ -203,34 +257,44 @@ Cards include their own variant classes for quickly changing the `background-col
 
 {% example html %}
 <div class="card card-inverse card-primary text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 <div class="card card-inverse card-success text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 <div class="card card-inverse card-info text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 <div class="card card-inverse card-warning text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 <div class="card card-inverse card-danger text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 {% endexample %}
 
@@ -241,47 +305,24 @@ Set a `width` on the `.card-group`, content automatically sizes for equal column
 {% example html %}
 <div class="card-group">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
-    <h4 class="card-title">Card title</h4>
-    <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>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-  </div>
-  <div class="card">
-    <img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
-    <h4 class="card-title">Card title</h4>
-    <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 class="card">
-    <img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
-    <h4 class="card-title">Card title</h4>
-    <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>
-{% endexample %}
-
-## Sets
-
-Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapper` and a `.card-set`. We use table styles for the sizing and the gutters on `.card-set`. The `.card-set-wrapper` is used to negative margin out the `border-spacing` on the `.card-set`.
-
-{% example html %}
-<div class="card-set-wrapper">
-  <div class="card-set">
-    <div class="card">
-      <img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <div class="card-block">
       <h4 class="card-title">Card title</h4>
-      <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">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>
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
-    <div class="card">
-      <img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <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 class="card">
-      <img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <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>
@@ -290,6 +331,41 @@ Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapper
 </div>
 {% endexample %}
 
+## Decks
+
+Get equal-width and equal-height cards by using two wrappers: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
+
+{% example html %}
+<div class="card-deck-wrapper">
+  <div class="card-deck">
+    <div class="card">
+      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <div class="card-block">
+        <h4 class="card-title">Card title</h4>
+        <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">
+      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <div class="card-block">
+        <h4 class="card-title">Card title</h4>
+        <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">
+      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <div class="card-block">
+        <h4 class="card-title">Card title</h4>
+        <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>
+</div>
+{% endexample %}
+
 ## Columns
 
 Cards can be organized into columns by wrapping a group with `.card-columns`.
diff --git a/scss/_card.scss b/scss/_card.scss
index d7423f33cc..b3d6e39615 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -2,28 +2,68 @@
 // Base styles
 //
 
+$card-spacer-x:      1.25rem;
+$card-spacer-y:      .75rem;
+$card-border-width:  .0625rem;
+$card-border-radius: .25rem;
+
 .card {
   position: relative;
-  padding: 1.25rem;
-  margin-bottom: 1.25rem;
-  border: .075rem solid #eee;
+  margin-bottom: $card-spacer-y;
+  border: $card-border-width solid #e5e5e5;
+  @include border-radius($card-border-radius);
 }
+
+.card-block {
+  padding: $card-spacer-x;
+}
+
 .card-title {
   margin-top: 0;
-  margin-bottom: .75rem;
+  margin-bottom: $card-spacer-y;
 }
+
+.card-subtitle {
+  margin-top: -($card-spacer-y / 2);
+  margin-bottom: 0;
+}
+
 .card-text:last-child {
   margin-bottom: 0;
 }
-.card-actions {
-  .card-link + .card-link {
-    margin-left: .75rem;
-  }
-}
+
+// .card-actions {
+//   padding: $card-spacer-y $card-spacer-x;
+
+//   .card-link + .card-link {
+//     margin-left: $card-spacer-x;
+//   }
+// }
+
 .card-link {
   @include hover {
     text-decoration: none;
   }
+
+  + .card-link {
+    margin-left: $card-spacer-x;
+  }
+}
+
+@if $enable-rounded {
+  .card {
+    > .list-group:first-child {
+      .list-group-item:first-child {
+        border-radius: $card-border-radius $card-border-radius 0 0;
+      }
+    }
+
+    > .list-group:last-child {
+      .list-group-item:last-child {
+        border-radius: 0 0 $card-border-radius $card-border-radius;
+      }
+    }
+  }
 }
 
 
@@ -32,33 +72,21 @@
 //
 
 .card-header {
-  padding: .75rem 1.25rem;
-  margin: -1.25rem -1.25rem 1.25rem;
-  border-bottom: .075rem solid #eee;
-  @include border-radius(.25rem .25rem 0 0);
+  padding: $card-spacer-y $card-spacer-x;
+  border-bottom: $card-border-width solid #eee;
+
+  &:first-child {
+    @include border-radius($card-border-radius $card-border-radius 0 0);
+  }
 }
+
 .card-footer {
-  padding: .75rem 1.25rem;
-  margin: 1.25rem -1.25rem -1.25rem;
-  border-top: .075rem solid #eee;
-  @include border-radius(0 0 .25rem .25rem);
-}
+  padding: $card-spacer-y $card-spacer-x;
+  border-top: $card-border-width solid #eee;
 
-
-//
-// Sizing variations
-//
-
-.card-sm {
-  width: 15rem;
-}
-
-.card-md {
-  width: 30rem;
-}
-
-.card-lg {
-  width: 45rem;
+  &:last-child {
+    @include border-radius(0 0 $card-border-radius $card-border-radius);
+  }
 }
 
 
@@ -128,7 +156,7 @@
 
 // Card image
 .card-img {
-  margin: -1.325rem;
+  // margin: -1.325rem;
   @include border-radius(.25rem);
 }
 .card-img-overlay {
@@ -144,11 +172,9 @@
 
 // Card image caps
 .card-img-top {
-  margin: -1.325rem -1.325rem 1.25rem;
   @include border-radius(.25rem .25rem 0 0);
 }
 .card-img-bottom {
-  margin: 1.25rem -1.325rem -1.325rem;
   @include border-radius(0 0 .25rem .25rem);
 }
 
@@ -157,22 +183,36 @@
 // Card set
 //
 
-.card-set {
-  display: table;
-  table-layout: fixed;
-  border-spacing: 1.25rem 0;
+@if $enable-flex {
+  .card-deck {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -.75rem;
+    margin-left: -.75rem;
 
-  .card {
-    display: table-cell;
-    float: none;
-    max-width: none;
+    .card {
+      flex: 1 0 0;
+      margin-left: .75rem;
+      margin-right: .75rem;
+    }
+  }
+} @else {
+  .card-deck {
+    display: table;
+    table-layout: fixed;
+    border-spacing: 1.25rem 0;
+
+    .card {
+      display: table-cell;
+      float: none;
+      max-width: none;
+    }
+  }
+  .card-deck-wrapper {
+    margin-right: -1.25rem;
+    margin-left: -1.25rem;
   }
 }
-.card-set-wrapper {
-  margin-right: -1.25rem;
-  margin-left: -1.25rem;
-}
-
 
 //
 // Card groups
@@ -199,6 +239,38 @@
       margin-left: 0;
       border-left: 0;
     }
+
+    // Handle rounded corners
+    &:first-child {
+      .card-img-top {
+        @if $enable-rounded {
+          border-top-right-radius: 0;
+        }
+      }
+      .card-img-bottom {
+        @if $enable-rounded {
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+    &:last-child {
+      .card-img-top {
+        @if $enable-rounded {
+          border-top-left-radius: 0;
+        }
+      }
+      .card-img-bottom {
+        @if $enable-rounded {
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+    &:not(:first-child):not(:last-child) {
+      .card-img-top,
+      .card-img-bottom {
+        @include border-radius(0);
+      }
+    }
   }
 }
 
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index f1af67640d..0dd7afb82f 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -10,7 +10,7 @@
 .list-group {
   // No need to set list-style: none; since .list-group-item is block level
   padding-left: 0; // reset padding because ul and ol
-  margin-bottom: 20px;
+  margin-bottom: 0;
 }
 
 
@@ -21,11 +21,11 @@
 .list-group-item {
   position: relative;
   display: block;
-  padding: 10px 15px;
+  padding: .75rem 1.25rem;
   // Place the border on the list items and negative margin up for better styling
-  margin-bottom: -1px;
+  margin-bottom: -.0625rem;
   background-color: $list-group-bg;
-  border: 1px solid $list-group-border;
+  border: .0625rem solid $list-group-border;
 
   // Round the first and last items
   &:first-child {
@@ -37,6 +37,13 @@
   }
 }
 
+.list-group-flush {
+  .list-group-item {
+    border-width: .0625rem 0;
+    border-radius: 0;
+  }
+}
+
 
 // Linked list items
 //