Finish killing .center-block; fixes #19443

Replace the leftover instances with .m-x-auto (and .d-block when necessary)
Closes #19665
Refs #19102
[skip sauce]

Author: Teo Dell'Amico

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,

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">

docs/examples/carousel/index.html

@@ -129,7 +129,7 @@ <h2 class="featurette-heading">First featurette heading. <span class="text-muted
           <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 @@ <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted"
           <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 @@ <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Ch
           <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>
 

docs/index.html

@@ -87,7 +87,7 @@ <h2 class="bd-featurette-title">Official Bootstrap Themes.</h2>
       <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>