Bootstrap: how to not have text-right in certain size?

Question

Using Twitter Bootstrap, when I reduce the size of my browser to XS size. This is my footer. I have the text-right property to handle the rest of the screen sizes, but on XS, it still aligns it to the right after stacking.

How do I get this to not text-right on XS screen sizes?

enter image description here

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12 copyright">
                <p>&copy; 2014 LFDate. All rights reserved.</p>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <ul class="list-inline text-right">
                    <li><p><a href="#">Blog</a></p></li>
                    <li><p><a href="#">Press</a></p></li>
                    <li><p><a href="#">Jobs</a></p></li>
                    <li><p><a href="#">Contact</a></p></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

ahaurat · Answer 1 · 2017-10-04T19:35:22.990

88

Bootstrap 4 has added new css classes for this purpose:

<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>

edited Oct 04 '17 at 19:35

answered Aug 14 '16 at 00:41

ahaurat

3,007
3
20
20

Yup! Bootstrap 4 rocks! – decoder7283 Oct 10 '17 at 01:02

score 39 · Answer 2 · answered Aug 27 '14 at 20:40

Found this gem on GitHub:https://github.com/twbs/bootstrap/issues/11292

It adds responsive classes for text left and right

.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;
    }
}

Definitely the way to go. Thanks for putting this here...never would've found it otherwise. — eflat, May 19 '15 at 22:24

score 27 · Accepted Answer · answered Aug 27 '14 at 20:44

27

You can simply rewrite it using CSS:

@media (max-width: 767px) {
    footer .text-right { text-align:center }
}

xs size is for 767px and lower resolutions.

answered Aug 27 '14 at 20:44

Kamil

1,877
12
13

3

It is very bad practice to hack the Bootstrap core. It is better to write your own class then. – Damjan Pavlica May 05 '16 at 16:14
This works well. The `footer .text-right` selector is specific enough, and it's acceptable if the override is done in a separate file following bootstrap.css – Zim Feb 12 '17 at 19:57
12

Bootstrap 4 has responsive alignment so you'd just use `text-sm-right`. – Zim Feb 12 '17 at 19:59
@ZimSystem Your response is the real answer to the question. You set your default CSS for the smallest size in you CSS file, and then add classes into your elements such as text-lg-center to center align the text on large screens – jordan Apr 07 '18 at 02:50
class `text-right` should do only one thing to align text right :) – vAhy_The Apr 23 '20 at 09:31

score 0 · Answer 4 · answered Mar 09 '21 at 08:46

In 2021, I still solving a similar issue with flexbox without changing the original Bootstrap styles. Looks great at any screen resolution.

<div class="row" style="display: flex; justify-content: center; align-items: center;">
 <div class="col-md-6 text-right" style="align-self: center; margin: auto;">
 ...
 </div>
 <div class="col-md-6" style="align-self: center; margin: auto;">
 ...
 </div>
</div>

You can style a "style" as a "class" and create them.

29" ultrawide:

Mobile phone:

Bootstrap: how to not have text-right in certain size?

4 Answers4