Estou seguindo um tutorial para a criação de um dashboard com bootstrap v3 com angular 2, entretanto eu estou tentando seguir utilizando o bootstrap v4 e angular 8. Na criação do Navbar e o menu lateral não tive problemas em migrar o código utilizando as novas versões, acontece que nas classes mais 'faceis' o grid do bootstrap não está funcionando, eu tentei criar um componente de um card e replicar ele 4x com a classe col-6 de modo que ficassem dois em cima e dois embaixo, mas eles ficam como coluna.
componente painel-simples
<div class="col-{{col}}">
<div class="card">
<div class="card-header bg-{{ tipo }}">
<p class="card-subtitle"> {{ titulo }}</p>
</div>
<div class="card-body">
<ng-content></ng-content>
</div>
</div>
</div>
painel-simples.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-painel-simples',
templateUrl: './painel-simples.component.html',
styleUrls: ['./painel-simples.component.css']
})
export class PainelSimplesComponent implements OnInit {
@Input() titulo;
@Input() col = 6;
@Input() tipo = "info"
constructor() { }
ngOnInit() {
}
}
resumo.component.html
<app-painel-simples titulo="Consultas marcadas últimos 30 dias" col="6">
<h3 class="text-center"> {{resumo.consultas.consultas_30dias_anteriores}} </h3>
</app-painel-simples>
<app-painel-simples titulo="Consultas marcadas Próximos 30 dias" col="6">
<h3 class="text-center"> {{resumo.consultas.consultas_30dias_posteriores}} </h3>
</app-painel-simples>
<app-painel-simples col=6 titulo='Faturamento Anterior'>
<div class="box-faturamento">
<div class="col-10">
<h3 class="text-left">{{resumo.faturamento.anterior.valor | currency : 'BRL'}}</h3>
</div>
<div class="alert col-2 sm" [ngClass]="resumo.faturamento.anterior.comparativo
>= 0 ? 'alert-success' : 'alert-danger'">
<p>{{resumo.faturamento.anterior.comparativo}}%</p>
</div>
</div>
</app-painel-simples>
<app-painel-simples col=6 titulo='Faturamento Previsão'>
<div class="box-faturamento">
<div class="col-10">
<h3 class="text-left">{{resumo.faturamento.previsao.valor | currency : 'BRL'}}</h3>
</div>
<div class="alert col-2 sm" [ngClass]="resumo.faturamento.previsao.comparativo
>= 0 ? 'alert-success' : 'alert-danger'">
<p>{{resumo.faturamento.previsao.comparativo}}%</p>
</div>
</div>
</app-painel-simples>
app.component.html
<app-barra-navegacao></app-barra-navegacao>
<div class="main">
<app-menu-lateral></app-menu-lateral>
<div class="container">
<app-resumo></app-resumo>
</div>
</div>
Não sei se pode mas estou postando o link do código no github https://github.com/dfealves/Dash-board-Angular para facilitar a compreensão, gostaria de entender o que estou fazendo de errado, já que o mesmo código em uma pagina html com o bootstrap funciona sem problemas.