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

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>

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

There is nothing built into bootstrap for this, but some simple css could fix it. Something like this should work. Not tested though

 @media (max-width: 768px) {
      .col-xs-12.text-right, .col-xs-12.text-left {
              text-align: center;
       } 
    }

Bootstrap 4

<div class="col-md-9 col-xs-12 text-md-left text-center">md left, xs center</div>
<div class="col-md-9 col-xs-12 text-md-right text-center">md right, xs center</div>

Css Part is:

CSS:

@media (max-width: 767px) {

  // Align text to center.
  .text-xs-center {
    text-align: center;
  } 
}

And the HTML part will be ( this text center work only below 767px width )

HTML:

 <div class="col-xs-12 col-sm-6 text-right text-xs-center">
        <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>