Bootstrap responsive text-align not working

Question

I'm trying to make some text center only on small viewport size and below. Wider than small should be left-align. For some reason, when I contiue to shrink the viewport, the text left-aligns.

Fiddle

<div class="row">
    <div id="box" class="col-md-6 offset-md-3 col-sm-12 text-md-left text-sm-center">
        Center me on col-sm, otherwise, left align me
    </div>
</div>

#box{
  width:600px;
  height:200px;
  border:1px solid black;
}

Answer 1

With Bootstrap 5, you need to use text-sm-start:

  <div class="row">
    <div id="box" class="col-md-6 col-sm-12 offset-md-3 text-center text-sm-start">
      Center me on col-sm, otherwise, left align me
    </div>
  </div>