Align components using angled bootstrap - html

Question

I'm trying to generate a component aligned in the middle, as follows:
<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>
app-card:
<div class="card">
<div class="card-header border-0" >
<h4 *ngIf="titulo" class="card-title"><i class="{{icon}}"></i> {{titulo}} </h4>
<ng-container *ngIf="header" [ngTemplateOutlet]="header"></ng-container>
</div>
<div class="card-body border-radius-bottom" [ngClass]="{'p-0': zeroPadding}">
<ng-content></ng-content>
</div>
</div>
How should it look: https://i.stack.imgur.com/NfuKw.png, how was it on the web: https://i.stack.imgur.com/cwKmq.png, how was it on the mobile: https://i.stack.imgur.com/RR6GP.png