Adjust Bootstrap Widget

I'm trying to make a widget in Bootstrap, but I'm not getting it. It looks like this:

HowdoIcentralizethenameoftheuser,professionandclass,makingtheinformationinthemobileversionsbelowthephoto?

I'mtryingthisway:

<divclass="col-sm-3">
 <div class="widget-usuario col-lg-12">
   <div class="row col-lg-12">
      <div class="col-lg-3">
           <img src="fotos-usuarios/silhuetaHomem.jpg" style="width:110px" class="img img-circle">
      </div>
      <div class="col-lg-9">
          <div class="tituloNome">Fernando</div>
          <label class="subTitulo">Professor</label><br>
          <label class="subTitulo">Turma: 1001</label>
      </div>
    </div>
      <div class="row col-lg-12">
          Último Acesso: 11/09/2017 às 11h11
      </div>
    </div>
</div>

CSS

<style media="screen">
    .widget-usuario { border-radius: 17px; text-align: center; padding-top: 10px; padding-bottom: 10px; background: #495B6C; color: #BECFE0 }
    .widget-usuario .tituloNome{ font-size: 30px; text-align: center; }
    .widget-usuario .subTitulo{ font-size: 14px; color: #BECFE0;  text-align: center; }
  </style>