diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index b952d7517e..da0a8d2e04 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -299,12 +299,6 @@
 
 // Helpers
 .bd-example > {
-  .center-block:not(img) {
-    max-width: 200px;
-    padding: .5rem;
-    background-color: #eee;
-  }
-
   .bg-primary,
   .bg-success,
   .bg-info,
diff --git a/docs/content/images.md b/docs/content/images.md
index e3e616de2e..86d9533543 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -60,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded center-block" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners">
 </div>
 
 {% highlight html %}
-<img src="..." class="img-rounded center-block" alt="...">
+<img src="..." class="img-rounded m-x-auto d-block" alt="...">
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index f0144bf3ea..5364fb8f85 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -129,7 +129,7 @@
           <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
         </div>
         <div class="col-md-5">
-          <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+          <img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>
 
@@ -141,7 +141,7 @@
           <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
         </div>
         <div class="col-md-5 pull-md-7">
-          <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+          <img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>
 
@@ -153,7 +153,7 @@
           <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
         </div>
         <div class="col-md-5">
-          <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+          <img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>
 
diff --git a/docs/index.html b/docs/index.html
index 6f88f4254a..86776fb241 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -87,7 +87,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
       <a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a>
     </p>
 
-    <img class="img-fluid center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
+    <img class="img-fluid m-x-auto" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
   </div>
 </div>