Remove non-responsive text alignment classes

These can be replaced by their `.text-xs-*` parallels.
This also avoids any complications from interactions between the responsive and non-responsive classes.
(e.g. `<div class="text-left text-md-right">`)

Refs #18300
[skip sauce]

2 files changed, 3 insertions, 3 deletions

diff --git a/docs/content/figures.md b/docs/content/figures.md
index 7b3df8bd1..d57270518 100644
--- a/docs/content/figures.md
+++ b/docs/content/figures.md
@@ -20,6 +20,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
 {% example html %}
 <figure class="figure">
   <img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
-  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
+  <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
 </figure>
 {% endexample %}
diff --git a/docs/content/images.md b/docs/content/images.md
index 1f9abc982..fc37a761a 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -68,13 +68,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  <div class="text-center">
+  <div class="text-xs-center">
     <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
   </div>
 </div>
 
 {% highlight html %}
-<div class="text-center">
+<div class="text-xs-center">
   <img src="..." class="img-rounded" alt="...">
 </div>
 {% endhighlight %}