Merge pull request #18774 from twbs/v4-outline-cards

v4: Rename .card-*-outline to .card-outline-*

2 files changed, 13 insertions, 13 deletions

diff --git a/docs/components/card.md b/docs/components/card.md
index c5af2bb02..159fa42be 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -314,10 +314,10 @@ Cards include their own variant classes for quickly changing the `background-col
 
 ## Outline variants
 
-In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-*-outline` ones to style just the `border-color` of a card.
+In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
 
 {% example html %}
-<div class="card card-primary-outline text-xs-center">
+<div class="card card-outline-primary text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -325,7 +325,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-secondary-outline text-xs-center">
+<div class="card card-outline-secondary text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -333,7 +333,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-success-outline text-xs-center">
+<div class="card card-outline-success text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -341,7 +341,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-info-outline text-xs-center">
+<div class="card card-outline-info text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -349,7 +349,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-warning-outline text-xs-center">
+<div class="card card-outline-warning text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -357,7 +357,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
     </blockquote>
   </div>
 </div>
-<div class="card card-danger-outline text-xs-center">
+<div class="card card-outline-danger text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
diff --git a/scss/_card.scss b/scss/_card.scss
index abf0ac5b6..3982f6e85 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -112,22 +112,22 @@
 }
 
 // Remove all backgrounds
-.card-primary-outline {
+.card-outline-primary {
   @include card-outline-variant($btn-primary-bg);
 }
-.card-secondary-outline {
+.card-outline-secondary {
   @include card-outline-variant($btn-secondary-border);
 }
-.card-info-outline {
+.card-outline-info {
   @include card-outline-variant($btn-info-bg);
 }
-.card-success-outline {
+.card-outline-success {
   @include card-outline-variant($btn-success-bg);
 }
-.card-warning-outline {
+.card-outline-warning {
   @include card-outline-variant($btn-warning-bg);
 }
-.card-danger-outline {
+.card-outline-danger {
   @include card-outline-variant($btn-danger-bg);
 }