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?

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

Centi

Answer 1

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.

Scuta

It is very bad practice to hack the Bootstrap core. It is better to write your own class then. – Megadeath

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 – Tradesfolk

Bootstrap 4 has responsive alignment so you'd just use text-sm-right. – Tradesfolk

@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 – Bim

class text-right should do only one thing to align text right :) – Parsons

Answer 2

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>

Kratzer

Yup! Bootstrap 4 rocks! – Bacchius

Answer 3

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

Tap

Definitely the way to go. Thanks for putting this here...never would've found it otherwise. – Scoggins

This is the best answer. – Uird

This is awsome! – Apocalypse

This works for Bootstrap 3.x! Thanks for posting this! – Melville

Answer 4

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:

Rotatory

Answer 5

For Bootstrap 5, we can use classes that have been provided

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

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

Source: https://getbootstrap.com/docs/5.3/utilities/text/

Articulation