twitter bootstrap text-center when in xs mode

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> 

Answer 2

<div class="text-lg-right text-center">   center in xs and right in lg devices </div> 

text-lg-right applies for large size only, so except large size text-center will be applied for the rest of the sizes.