<p dir="auto">would be great if the following classes had responsive alternatives:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".text-center
.text-left
.text-right"><pre class="notranslate"><code class="notranslate">.text-center
.text-left
.text-right
</code></pre></div>
<p dir="auto">maybe like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".text-lg-left, .text-md-left ......
.text-sm-center, .text-xs-center......
etc"><pre class="notranslate"><code class="notranslate">.text-lg-left, .text-md-left ......
.text-sm-center, .text-xs-center......
etc
</code></pre></div>
<p dir="auto">im forever having to manually set text centre on xs/sm columns and would be great to see them in the framework. Based on some current trends its quite a common thing to see when columns become full width, and having the classes in the framework would save heaps of time when working across multiple projects.</p>
<p dir="auto">text-left, text-center, and text-right should have a way to be responsive. Once of the great things about bootstrap is the responsive grid system. May times during coding though, I found I want to center a div when in larger screens, but left or right align it when in xs.</p>
<p dir="auto">Here is css code I believe would do the trick. The below code will allow you specify when you do or dont want to set text alignment.</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
    text-align: left;
}
.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
    text-align: center;
}
.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
    text-align: right;
}
.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
    text-align: justify;
}

@media (max-width: 767px) {
    .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
        text-align: inherit;
    }
    .text-left-xs {
        text-align: left;
    }
    .text-center-xs {
        text-align: center;
    }
    .text-right-xs {
        text-align: right;
    }
    .text-justify-xs {
        text-align: justify;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
        text-align: inherit;
    }
    .text-left-sm {
        text-align: left;
    }
    .text-center-sm {
        text-align: center;
    }
    .text-right-sm {
        text-align: right;
    }
    .text-justify-sm {
        text-align: justify;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
        text-align: inherit;
    }
    .text-left-md {
        text-align: left;
    }
    .text-center-md {
        text-align: center;
    }
    .text-right-md {
        text-align: right;
    }
    .text-justify-md {
        text-align: justify;
    }
}
@media (min-width: 1200px) {
    .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
        text-align: inherit;
    }
    .text-left-lg {
        text-align: left;
    }
    .text-center-lg {
        text-align: center;
    }
    .text-right-lg {
        text-align: right;
    }
    .text-justify-lg {
        text-align: justify;
    }
}"><pre class="notranslate">.<span class="pl-c1">text-left-not-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">text-left-not-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">text-left-not-md</span><span class="pl-kos">,</span> .<span class="pl-c1">text-left-not-lg</span> {
    <span class="pl-c1">text-align</span><span class="pl-kos">:</span> left;
}
.<span class="pl-c1">text-center-not-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">text-center-not-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">text-center-not-md</span><span class="pl-kos">,</span> .<span class="pl-c1">text-center-not-lg</span> {
    <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
}
.<span class="pl-c1">text-right-not-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">text-right-not-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">text-right-not-md</span><span class="pl-kos">,</span> .<span class="pl-c1">text-right-not-lg</span> {
    <span class="pl-c1">text-align</span><span class="pl-kos">:</span> right;
}
.<span class="pl-c1">text-justify-not-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">text-justify-not-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">text-justify-not-md</span><span class="pl-kos">,</span> .<span class="pl-c1">text-justify-not-lg</span> {
    <span class="pl-c1">text-align</span><span class="pl-kos">:</span> justify;
}

<span class="pl-k">@media</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">767<span class="pl-smi">px</span></span>) {
    .<span class="pl-c1">text-left-not-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">text-center-not-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">text-right-not-xs</span><span class="pl-kos">,</span> .<span class="pl-c1">text-justify-not-xs</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> inherit;
    }
    .<span class="pl-c1">text-left-xs</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> left;
    }
    .<span class="pl-c1">text-center-xs</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
    }
    .<span class="pl-c1">text-right-xs</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> right;
    }
    .<span class="pl-c1">text-justify-xs</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> justify;
    }
}
<span class="pl-k">@media</span> (<span class="pl-c1">min-width</span><span class="pl-kos">:</span> <span class="pl-c1">768<span class="pl-smi">px</span></span>) <span class="pl-c1">and</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">991<span class="pl-smi">px</span></span>) {
    .<span class="pl-c1">text-left-not-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">text-center-not-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">text-right-not-sm</span><span class="pl-kos">,</span> .<span class="pl-c1">text-justify-not-sm</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> inherit;
    }
    .<span class="pl-c1">text-left-sm</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> left;
    }
    .<span class="pl-c1">text-center-sm</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
    }
    .<span class="pl-c1">text-right-sm</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> right;
    }
    .<span class="pl-c1">text-justify-sm</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> justify;
    }
}
<span class="pl-k">@media</span> (<span class="pl-c1">min-width</span><span class="pl-kos">:</span> <span class="pl-c1">992<span class="pl-smi">px</span></span>) <span class="pl-c1">and</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span> <span class="pl-c1">1199<span class="pl-smi">px</span></span>) {
    .<span class="pl-c1">text-left-not-md</span><span class="pl-kos">,</span> .<span class="pl-c1">text-center-not-md</span><span class="pl-kos">,</span> .<span class="pl-c1">text-right-not-md</span><span class="pl-kos">,</span> .<span class="pl-c1">text-justify-not-md</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> inherit;
    }
    .<span class="pl-c1">text-left-md</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> left;
    }
    .<span class="pl-c1">text-center-md</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
    }
    .<span class="pl-c1">text-right-md</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> right;
    }
    .<span class="pl-c1">text-justify-md</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> justify;
    }
}
<span class="pl-k">@media</span> (<span class="pl-c1">min-width</span><span class="pl-kos">:</span> <span class="pl-c1">1200<span class="pl-smi">px</span></span>) {
    .<span class="pl-c1">text-left-not-lg</span><span class="pl-kos">,</span> .<span class="pl-c1">text-center-not-lg</span><span class="pl-kos">,</span> .<span class="pl-c1">text-right-not-lg</span><span class="pl-kos">,</span> .<span class="pl-c1">text-justify-not-lg</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> inherit;
    }
    .<span class="pl-c1">text-left-lg</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> left;
    }
    .<span class="pl-c1">text-center-lg</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
    }
    .<span class="pl-c1">text-right-lg</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> right;
    }
    .<span class="pl-c1">text-justify-lg</span> {
        <span class="pl-c1">text-align</span><span class="pl-kos">:</span> justify;
    }
}</pre></div>