How can I align text center on small screens with Bootstrap?

Question

I have html as:-

<footer>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 text-left">
            <p>
                &copy; 2015 example.com. All rights reserved.
            </p>
        </div>
        <div class="col-xs-12 col-sm-6 text-right">
            <p>
                <a href="#"><i class="fa fa-facebook"></i></a> 
                <a href="#"><i class="fa fa-twitter"></i></a> 
                <a href="#"><i class="fa fa-google-plus"></i></a>
            </p>
        </div>
    </div>
</div>
</footer>

From the code you can see that the column's text are left and right aligned respectively. However in the xs mode I like them to be center aligned. How can I do this using twitter bootstrap?

Answer 1

Responsive text alignment has been added in Bootstrap V4:

https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>