Remove non-responsive text alignment classes

Created by: cvrebert

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 (closed).

CC: @mdo

docs/components/card.md

@@ -130,13 +130,13 @@ You can quickly change the text alignment of any card—in its entirety or speci
   <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 
-<div class="card card-block text-center">
+<div class="card card-block text-xs-center">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 
-<div class="card card-block text-right">
+<div class="card card-block text-xs-right">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -186,7 +186,7 @@ Add an optional header and/or footer within a card.
 {% endexample %}
 
 {% example html %}
-<div class="card text-center">
+<div class="card text-xs-center">
   <div class="card-header">
     Featured
   </div>
@@ -260,7 +260,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
 Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
 
 {% example html %}
-<div class="card card-inverse card-primary text-center">
+<div class="card card-inverse card-primary text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -268,7 +268,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-success text-center">
+<div class="card card-inverse card-success text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -276,7 +276,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-info text-center">
+<div class="card card-inverse card-info text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -284,7 +284,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-warning text-center">
+<div class="card card-inverse card-warning text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -292,7 +292,7 @@ Cards include their own variant classes for quickly changing the `background-col
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-danger text-center">
+<div class="card card-inverse card-danger text-xs-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -409,7 +409,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
       <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
   </div>
-  <div class="card card-block card-inverse card-primary text-center">
+  <div class="card card-block card-inverse card-primary text-xs-center">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
       <footer>
@@ -419,7 +419,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
       </footer>
     </blockquote>
   </div>
-  <div class="card card-block text-center">
+  <div class="card card-block text-xs-center">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@@ -427,7 +427,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
   <div class="card">
     <img class="card-img" data-src="holder.js/100px260/" alt="Card image">
   </div>
-  <div class="card card-block text-right">
+  <div class="card card-block text-xs-right">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>

docs/components/utilities.md

@@ -94,13 +94,23 @@ Assign `margin` or `padding` to an element or a subset of its sides with shortha
 Easily realign text to components with text alignment classes.
 
 {% example html %}
-<p class="text-left">Left aligned text.</p>
-<p class="text-center">Center aligned text.</p>
-<p class="text-right">Right aligned text.</p>
 <p class="text-justify">Justified text.</p>
 <p class="text-nowrap">No wrap text.</p>
 {% endexample %}
 
+For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
+
+{% example html %}
+<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
+<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
+<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
+
+<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
+<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
+<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
+<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
+{% endexample %}
+
 ## Text transform
 
 Transform text in components with text capitalization classes.

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 %}

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 %}

docs/examples/album/index.html

@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <section class="jumbotron text-center">
+    <section class="jumbotron text-xs-center">
       <div class="container">
         <h1 class="jumbotron-heading">Album example</h1>
         <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>