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

html css twitter-bootstrap responsive-design text-align
The Nomad picture The Nomad · Aug 27, 2014 · Viewed 42k times · Source

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>

Answer

ahaurat picture ahaurat · Aug 14, 2016

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>

Related questions

Hiding elements in responsive layout?

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page? For example, I have a along with nav-pills floated right. On a small screen this …

Read More
Making button go full-width?

I want a button to take up the full width of the column, but having difficulties... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div&…

Read More
Creating a fixed sidebar alongside a centered Bootstrap 3 grid

I'd like to create a fixed sidebar that exists outside my centered Bootstrap Grid. The challenge I face when attempting to do this is determining what additional styles to apply/overwrite to my .container so that it doesn't overlap my …

Read More