Выровнять компоненты и div bootstrap

Question

Я пытаюсь создать компонент, выровненный по центру, следующим образом:

html:

<app-card titulo="Painel ao Vivo" [zeroPadding]="false" icon="fa-heartbeat fas">
  <div class="col-md-12 col-lg-12 col-sm-12">
    <div class="justify-content-center">
      <span class="text-sm text-black font-weight-bold mr-2">{{jogo.timeCasa.nome}}</span>
      <app-avatar [titulo]="jogo.timeCasa.nome" [img]="jogo.timeCasa.logo"
                  class="avatar rounded-circle bg-primary mr-2"></app-avatar>
      <button type="button" class="btn btn-primary btn-sm">0</button>
      <button type="button" class="btn btn-primary btn-sm">0</button>
      <app-avatar [titulo]="jogo.timeVisita.nome" [img]="jogo.timeVisita.logo"
                  class="avatar rounded-circle bg-primary mr-2"></app-avatar>
      <span class="text-sm text-black font-weight-bold">{{jogo.timeVisita.nome}}</span>
    </div>
  </div>
</app-card>

Как он должен выглядеть

как было в сети

как было на мобильном