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]

diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index b952d7517e3b364a1d810d0e00502b00bcbf11ad..da0a8d2e04e59c004e2140a0bdd0397cc0e8cd35 100644 (file)
--- 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 e3e616de2e10ecf8748ae4015b0dafd607f960d3..86d9533543028db48a370441bc0036e3ac4a2a66 100644 (file)
--- 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 f0144bf3ea08c5071bbb8b6f91e9a07fcfd42ced..5364fb8f853543f426c3841e69864c8b77198730 100644 (file)
--- 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 6f88f4254a238b64f92f198fc90c7c0364f985b3..86776fb241f6332870a8d17a9c3a5a75149017b1 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -87,7 +87,7 @@ title: Bootstrap · 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>