Merge pull request #18317 from twbs/redundant-text-aligns-18300

Remove non-responsive text alignment classes

1 files changed, 13 insertions, 3 deletions

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index c2ac73bbc..7f3a5cc8d 100644
--- a/docs/components/utilities.md
+++ b/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.