diff --git a/site/docs/4.1/examples/album/album.css b/site/docs/4.1/examples/album/album.css
index 7eabbf9b2f..f9d1518d3c 100644
--- a/site/docs/4.1/examples/album/album.css
+++ b/site/docs/4.1/examples/album/album.css
@@ -35,5 +35,3 @@ footer {
 footer p {
   margin-bottom: .25rem;
 }
-
-.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
diff --git a/site/docs/4.1/examples/album/index.html b/site/docs/4.1/examples/album/index.html
index d7ffbb1e52..b30aea0688 100644
--- a/site/docs/4.1/examples/album/index.html
+++ b/site/docs/4.1/examples/album/index.html
@@ -37,7 +37,7 @@
           </div>
         </div>
       </div>
-      <div class="navbar navbar-dark bg-dark box-shadow">
+      <div class="navbar navbar-dark bg-dark shadow-sm">
         <div class="container d-flex justify-content-between">
           <a href="#" class="navbar-brand d-flex align-items-center">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
@@ -68,7 +68,7 @@
 
           <div class="row">
             <div class="col-md-4">
-              <div class="card mb-4 box-shadow">
+              <div class="card mb-4 shadow-sm">
                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                 <div class="card-body">
                   <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>
@@ -83,7 +83,7 @@
               </div>
             </div>
             <div class="col-md-4">
-              <div class="card mb-4 box-shadow">
+              <div class="card mb-4 shadow-sm">
                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                 <div class="card-body">
                   <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>
@@ -98,7 +98,7 @@
               </div>
             </div>
             <div class="col-md-4">
-              <div class="card mb-4 box-shadow">
+              <div class="card mb-4 shadow-sm">
                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                 <div class="card-body">
                   <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>
@@ -114,7 +114,7 @@
             </div>
 
             <div class="col-md-4">
-              <div class="card mb-4 box-shadow">
+              <div class="card mb-4 shadow-sm">
                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                 <div class="card-body">
                   <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>
@@ -129,7 +129,7 @@
               </div>
             </div>
             <div class="col-md-4">
-              <div class="card mb-4 box-shadow">
+              <div class="card mb-4 shadow-sm">
                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                 <div class="card-body">
                   <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>
@@ -144,7 +144,7 @@
               </div>
             </div>
             <div class="col-md-4">
-              <div class="card mb-4 box-shadow">
+              <div class="card mb-4 shadow-sm">
                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                 <div class="card-body">
                   <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>
@@ -160,7 +160,7 @@
             </div>
 
             <div class="col-md-4">
-              <div class="card mb-4 box-shadow">
+              <div class="card mb-4 shadow-sm">
                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                 <div class="card-body">
                   <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>
@@ -175,7 +175,7 @@
               </div>
             </div>
             <div class="col-md-4">
-              <div class="card mb-4 box-shadow">
+              <div class="card mb-4 shadow-sm">
                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                 <div class="card-body">
                   <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>
@@ -190,7 +190,7 @@
               </div>
             </div>
             <div class="col-md-4">
-              <div class="card mb-4 box-shadow">
+              <div class="card mb-4 shadow-sm">
                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
                 <div class="card-body">
                   <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>
diff --git a/site/docs/4.1/examples/blog/blog.css b/site/docs/4.1/examples/blog/blog.css
index 399b7e8730..059125fa86 100644
--- a/site/docs/4.1/examples/blog/blog.css
+++ b/site/docs/4.1/examples/blog/blog.css
@@ -71,8 +71,6 @@ h1, h2, h3, h4, h5, h6 {
 .border-top { border-top: 1px solid #e5e5e5; }
 .border-bottom { border-bottom: 1px solid #e5e5e5; }
 
-.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
-
 /*
  * Blog name and description
  */
diff --git a/site/docs/4.1/examples/blog/index.html b/site/docs/4.1/examples/blog/index.html
index 747855e06d..fef06c4766 100644
--- a/site/docs/4.1/examples/blog/index.html
+++ b/site/docs/4.1/examples/blog/index.html
@@ -64,7 +64,7 @@
 
       <div class="row mb-2">
         <div class="col-md-6">
-          <div class="card flex-md-row mb-4 box-shadow h-md-250">
+          <div class="card flex-md-row mb-4 shadow-sm h-md-250">
             <div class="card-body d-flex flex-column align-items-start">
               <strong class="d-inline-block mb-2 text-primary">World</strong>
               <h3 class="mb-0">
@@ -78,7 +78,7 @@
           </div>
         </div>
         <div class="col-md-6">
-          <div class="card flex-md-row mb-4 box-shadow h-md-250">
+          <div class="card flex-md-row mb-4 shadow-sm h-md-250">
             <div class="card-body d-flex flex-column align-items-start">
               <strong class="d-inline-block mb-2 text-success">Design</strong>
               <h3 class="mb-0">
diff --git a/site/docs/4.1/examples/checkout/form-validation.css b/site/docs/4.1/examples/checkout/form-validation.css
index fd88d5a403..dcd283b97b 100644
--- a/site/docs/4.1/examples/checkout/form-validation.css
+++ b/site/docs/4.1/examples/checkout/form-validation.css
@@ -6,6 +6,4 @@
 .border-bottom { border-bottom: 1px solid #e5e5e5; }
 .border-top-gray { border-top-color: #adb5bd; }
 
-.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
-
 .lh-condensed { line-height: 1.25; }
diff --git a/site/docs/4.1/examples/offcanvas/index.html b/site/docs/4.1/examples/offcanvas/index.html
index 431ed88a3b..7dae17a8a4 100644
--- a/site/docs/4.1/examples/offcanvas/index.html
+++ b/site/docs/4.1/examples/offcanvas/index.html
@@ -54,7 +54,7 @@
       </div>
     </nav>
 
-    <div class="nav-scroller bg-white box-shadow">
+    <div class="nav-scroller bg-white shadow-sm">
       <nav class="nav nav-underline">
         <a class="nav-link active" href="#">Dashboard</a>
         <a class="nav-link" href="#">
@@ -72,7 +72,7 @@
     </div>
 
     <main role="main" class="container">
-      <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
+      <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm">
         <img class="mr-3" src="../../assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
         <div class="lh-100">
           <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
@@ -80,7 +80,7 @@
         </div>
       </div>
 
-      <div class="my-3 p-3 bg-white rounded box-shadow">
+      <div class="my-3 p-3 bg-white rounded shadow-sm">
         <h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
         <div class="media text-muted pt-3">
           <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
@@ -108,7 +108,7 @@
         </small>
       </div>
 
-      <div class="my-3 p-3 bg-white rounded box-shadow">
+      <div class="my-3 p-3 bg-white rounded shadow-sm">
         <h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
         <div class="media text-muted pt-3">
           <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
diff --git a/site/docs/4.1/examples/offcanvas/offcanvas.css b/site/docs/4.1/examples/offcanvas/offcanvas.css
index 7edfa0bc9c..da00324003 100644
--- a/site/docs/4.1/examples/offcanvas/offcanvas.css
+++ b/site/docs/4.1/examples/offcanvas/offcanvas.css
@@ -72,8 +72,6 @@ body {
 
 .border-bottom { border-bottom: 1px solid #e5e5e5; }
 
-.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
-
 .lh-100 { line-height: 1; }
 .lh-125 { line-height: 1.25; }
 .lh-150 { line-height: 1.5; }
diff --git a/site/docs/4.1/examples/pricing/index.html b/site/docs/4.1/examples/pricing/index.html
index 4fd1fa033d..5ae570aad4 100644
--- a/site/docs/4.1/examples/pricing/index.html
+++ b/site/docs/4.1/examples/pricing/index.html
@@ -18,7 +18,7 @@
 
   <body>
 
-    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
+    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
       <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
       <nav class="my-2 my-md-0 mr-md-3">
         <a class="p-2 text-dark" href="#">Features</a>
@@ -36,7 +36,7 @@
 
     <div class="container">
       <div class="card-deck mb-3 text-center">
-        <div class="card mb-4 box-shadow">
+        <div class="card mb-4 shadow-sm">
           <div class="card-header">
             <h4 class="my-0 font-weight-normal">Free</h4>
           </div>
@@ -51,7 +51,7 @@
             <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
           </div>
         </div>
-        <div class="card mb-4 box-shadow">
+        <div class="card mb-4 shadow-sm">
           <div class="card-header">
             <h4 class="my-0 font-weight-normal">Pro</h4>
           </div>
@@ -66,7 +66,7 @@
             <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
           </div>
         </div>
-        <div class="card mb-4 box-shadow">
+        <div class="card mb-4 shadow-sm">
           <div class="card-header">
             <h4 class="my-0 font-weight-normal">Enterprise</h4>
           </div>
diff --git a/site/docs/4.1/examples/pricing/pricing.css b/site/docs/4.1/examples/pricing/pricing.css
index 1b52205c6e..203b8ebe91 100644
--- a/site/docs/4.1/examples/pricing/pricing.css
+++ b/site/docs/4.1/examples/pricing/pricing.css
@@ -21,5 +21,3 @@ html {
 
 .border-top { border-top: 1px solid #e5e5e5; }
 .border-bottom { border-bottom: 1px solid #e5e5e5; }
-
-.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
diff --git a/site/docs/4.1/examples/product/index.html b/site/docs/4.1/examples/product/index.html
index d82b7d2a90..5477eb37b9 100644
--- a/site/docs/4.1/examples/product/index.html
+++ b/site/docs/4.1/examples/product/index.html
@@ -39,8 +39,8 @@
         <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.</p>
         <a class="btn btn-outline-secondary" href="#">Coming soon</a>
       </div>
-      <div class="product-device box-shadow d-none d-md-block"></div>
-      <div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
+      <div class="product-device shadow-sm d-none d-md-block"></div>
+      <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
     </div>
 
     <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
@@ -49,14 +49,14 @@
           <h2 class="display-5">Another headline</h2>
           <p class="lead">And an even wittier subheading.</p>
         </div>
-        <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+        <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
       </div>
       <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
         <div class="my-3 p-3">
           <h2 class="display-5">Another headline</h2>
           <p class="lead">And an even wittier subheading.</p>
         </div>
-        <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+        <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
       </div>
     </div>
 
@@ -66,14 +66,14 @@
           <h2 class="display-5">Another headline</h2>
           <p class="lead">And an even wittier subheading.</p>
         </div>
-        <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+        <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
       </div>
       <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
         <div class="my-3 py-3">
           <h2 class="display-5">Another headline</h2>
           <p class="lead">And an even wittier subheading.</p>
         </div>
-        <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+        <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
       </div>
     </div>
 
@@ -83,14 +83,14 @@
           <h2 class="display-5">Another headline</h2>
           <p class="lead">And an even wittier subheading.</p>
         </div>
-        <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+        <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
       </div>
       <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
         <div class="my-3 py-3">
           <h2 class="display-5">Another headline</h2>
           <p class="lead">And an even wittier subheading.</p>
         </div>
-        <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+        <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
       </div>
     </div>
 
@@ -100,14 +100,14 @@
           <h2 class="display-5">Another headline</h2>
           <p class="lead">And an even wittier subheading.</p>
         </div>
-        <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+        <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
       </div>
       <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
         <div class="my-3 py-3">
           <h2 class="display-5">Another headline</h2>
           <p class="lead">And an even wittier subheading.</p>
         </div>
-        <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+        <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
       </div>
     </div>
 
diff --git a/site/docs/4.1/examples/product/product.css b/site/docs/4.1/examples/product/product.css
index cc0d15c8ce..fc8b045196 100644
--- a/site/docs/4.1/examples/product/product.css
+++ b/site/docs/4.1/examples/product/product.css
@@ -63,8 +63,6 @@
 .border-top { border-top: 1px solid #e5e5e5; }
 .border-bottom { border-bottom: 1px solid #e5e5e5; }
 
-.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
-
 .flex-equal > * {
   -ms-flex: 1;
   flex: 1;