CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bill Kindig
Bill Kindig

Reputation: 3622

Bootstrap responsive text-align not working

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;
}

Upvotes: 0

Views: 1376

Answers (1)

Noah
Noah

Reputation: 384

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>

Upvotes: 4

Related Questions