Remove 'xs' from text utilities (#21217)

docs/_layouts/simple.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<div class="bd-pageheader text-xs-center text-sm-left">
+<div class="bd-pageheader text-center text-sm-left">
   <div class="container">
     <h1>{{ page.title }}</h1>
     <p class="lead">

docs/components/card.md

@@ -151,13 +151,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-xs-center">
+<div class="card card-block text-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-xs-right">
+<div class="card card-block text-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>
@@ -209,7 +209,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
 {% endexample %}
 
 {% example html %}
-<div class="card text-xs-center">
+<div class="card text-center">
   <div class="card-header">
     Featured
   </div>
@@ -229,7 +229,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
 Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment.
 
 {% example html %}
-<div class="card text-xs-center">
+<div class="card text-center">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs float-left">
       <li class="nav-item">
@@ -252,7 +252,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% endexample %}
 
 {% example html %}
-<div class="card text-xs-center">
+<div class="card text-center">
   <div class="card-header">
     <ul class="nav nav-pills card-header-pills float-left">
       <li class="nav-item">
@@ -333,39 +333,39 @@ 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-xs-center">
+<div class="card card-inverse card-primary text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-success text-xs-center">
+<div class="card card-inverse card-success text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-info text-xs-center">
+<div class="card card-inverse card-info text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-warning text-xs-center">
+<div class="card card-inverse card-warning text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
     </blockquote>
   </div>
 </div>
-<div class="card card-inverse card-danger text-xs-center">
+<div class="card card-inverse card-danger text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -383,47 +383,47 @@ Cards include their own variant classes for quickly changing the `background-col
 In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
 
 {% example html %}
-<div class="card card-outline-primary text-xs-center">
+<div class="card card-outline-primary text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-secondary text-xs-center">
+<div class="card card-outline-secondary text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-success text-xs-center">
+<div class="card card-outline-success text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-info text-xs-center">
+<div class="card card-outline-info text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-warning text-xs-center">
+<div class="card card-outline-warning text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
     </blockquote>
   </div>
 </div>
-<div class="card card-outline-danger text-xs-center">
+<div class="card card-outline-danger text-center">
   <div class="card-block">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -542,7 +542,7 @@ Only applies to small devices and above.
       <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-xs-center">
+  <div class="card card-block card-inverse card-primary text-center">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
       <footer>
@@ -552,15 +552,15 @@ Only applies to small devices and above.
       </footer>
     </blockquote>
   </div>
-  <div class="card card-block text-xs-center">
+  <div class="card card-block text-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>
   </div>
   <div class="card">
     <img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
   </div>
-  <div class="card card-block text-xs-right">
+  <div class="card card-block text-right">
     <blockquote class="card-blockquote">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
       <footer>

docs/components/progress.md

@@ -18,19 +18,19 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
 
 {% example html %}
 
-<div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
+<div class="text-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
 <progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
 
-<div class="text-xs-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
+<div class="text-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
 <progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
 
-<div class="text-xs-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
+<div class="text-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
 <progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
 
-<div class="text-xs-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
+<div class="text-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
 <progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
 
-<div class="text-xs-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
+<div class="text-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
 <progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
 {% endexample %}
 
@@ -39,7 +39,7 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
 Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
 
 {% example html %}
-<div class="text-xs-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
+<div class="text-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
 <progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
   <div class="progress">
     <span class="progress-bar" style="width: 25%;"></span>

docs/content/figures.md

@@ -21,6 +21,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 rounded" alt="A generic square placeholder image with rounded corners in a figure.">
-  <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
+  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
 </figure>
 {% endexample %}

docs/content/images.md

@@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  <div class="text-xs-center">
+  <div class="text-center">
     <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
   </div>
 </div>
 
 {% highlight html %}
-<div class="text-xs-center">
+<div class="text-center">
   <img src="..." class="rounded" alt="...">
 </div>
 {% endhighlight %}

docs/examples/album/index.html

@@ -43,7 +43,7 @@ <h4>Contact</h4>
       </div>
     </div>
 
-    <section class="jumbotron text-xs-center">
+    <section class="jumbotron text-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>

docs/examples/carousel/index.html

@@ -51,7 +51,7 @@
         <div class="carousel-item active">
           <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
           <div class="container">
-            <div class="carousel-caption text-xs-left">
+            <div class="carousel-caption text-left">
               <h1>Example headline.</h1>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
               <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@@ -71,7 +71,7 @@ <h1>Another example headline.</h1>
         <div class="carousel-item">
           <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
           <div class="container">
-            <div class="carousel-caption text-xs-right">
+            <div class="carousel-caption text-right">
               <h1>One more for good measure.</h1>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
               <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>

docs/examples/dashboard/index.html

@@ -92,7 +92,7 @@
         <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
           <h1>Dashboard</h1>
 
-          <section class="row text-xs-center placeholders">
+          <section class="row text-center placeholders">
             <div class="col-6 col-sm-3 placeholder">
               <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
               <h4>Label</h4>

docs/layout/grid.md

@@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
     <thead>
       <tr>
         <th></th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Extra small<br>
           <small>&lt;576px</small>
         </th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Small<br>
           <small>&ge;576px</small>
         </th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Medium<br>
           <small>&ge;768px</small>
         </th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Large<br>
           <small>&ge;992px</small>
         </th>
-        <th class="text-xs-center">
+        <th class="text-center">
           Extra large<br>
           <small>&ge;1200px</small>
         </th>

docs/utilities/typography.md

@@ -30,9 +30,9 @@ Easily realign text to components with text alignment classes.
 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-left">Left aligned text on all viewport sizes.</p>
+<p class="text-center">Center aligned text on all viewport sizes.</p>
+<p class="text-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>

scss/utilities/_text.scss

@@ -12,9 +12,17 @@
 
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    .text-#{$breakpoint}-left   { text-align: left !important; }
-    .text-#{$breakpoint}-right  { text-align: right !important; }
-    .text-#{$breakpoint}-center { text-align: center !important; }
+    $min: breakpoint-min($breakpoint, $grid-breakpoints);
+
+    @if $min {
+      .text-#{$breakpoint}-left   { text-align: left !important; }
+      .text-#{$breakpoint}-right  { text-align: right !important; }
+      .text-#{$breakpoint}-center { text-align: center !important; }
+    } @else {
+      .text-left   { text-align: left !important; }
+      .text-right  { text-align: right !important; }
+      .text-center { text-align: center !important; }
+    }
   }
 }