clip to border-box, update overlay

diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md
index 799d0bcbc9cd12d513deaf0736db622ee662fc20..28483fc1371c243f47a224db7022259ee3694c99 100644 (file)
--- 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 c3bda78cdca410d4036b802de40c0e20e5fbb363..1ab85a4ec22981c455d6bb63a0fc52c4bedca55a 100644 (file)
--- 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);
 }