JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <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>

CSS

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