The Nomad The Nomad - 6 months ago 21
HTML Question

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

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

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.

Comments