From 88b9e558fbb19fd1a653ced4dd5e1292df8e87c0 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Fri, 30 Jun 2017 15:28:50 -0700
Subject: [PATCH] clip to border-box, update overlay

---
 docs/4.0/components/card.md | 2 +-
 scss/_card.scss             | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md
index 799d0bcbc9..28483fc137 100644
--- a/docs/4.0/components/card.md
+++ b/docs/4.0/components/card.md
@@ -352,7 +352,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
 Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.
 
 {% example html %}
-<div class="card text-white">
+<div class="card bg-dark text-white">
   <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
   <div class="card-img-overlay">
     <h4 class="card-title">Card title</h4>
diff --git a/scss/_card.scss b/scss/_card.scss
index c3bda78cdc..1ab85a4ec2 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -9,6 +9,7 @@
   min-width: 0;
   word-wrap: break-word;
   background-color: $card-bg;
+  background-clip: border-box;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 }