diff --git a/docs/4.1/examples/album/index.html b/docs/4.1/examples/album/index.html
index dbfd38ebf2..f8f51e6a13 100644
--- a/docs/4.1/examples/album/index.html
+++ b/docs/4.1/examples/album/index.html
@@ -37,7 +37,7 @@
           </div>
         </div>
       </div>
-      <div class="navbar navbar-dark bg-dark 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 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 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 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 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 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 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 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 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 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/docs/4.1/examples/blog/index.html b/docs/4.1/examples/blog/index.html
index bd8c8c6885..83caad6b2e 100644
--- a/docs/4.1/examples/blog/index.html
+++ b/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 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 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/docs/4.1/examples/offcanvas/index.html b/docs/4.1/examples/offcanvas/index.html
index 1ef8833acc..1c9661233e 100644
--- a/docs/4.1/examples/offcanvas/index.html
+++ b/docs/4.1/examples/offcanvas/index.html
@@ -54,7 +54,7 @@
       </div>
     </nav>
 
-    <div class="nav-scroller bg-white 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 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="https://getbootstrap.com/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 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 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/docs/4.1/examples/pricing/index.html b/docs/4.1/examples/pricing/index.html
index 33556acdfb..e1a385bde1 100644
--- a/docs/4.1/examples/pricing/index.html
+++ b/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 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 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 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 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/docs/4.1/examples/product/index.html b/docs/4.1/examples/product/index.html
index 86d6a4d480..4c55c02f6b 100644
--- a/docs/4.1/examples/product/index.html
+++ b/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 shadow d-none d-md-block"></div>
-      <div class="product-device product-device-2 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 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 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 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 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 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 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 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 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>