Problem to migrate bootstrap v3 to v4 with Angular 8

Question

I am following a tutorial for creating a Dashboard with bootstrap v3 with angular 2, however I am trying to continue using the bootstrap v4 and angular 8. In the creation of Navbar and the side menu I had no problems in migrating the code using the new versions, it happens that in the more 'easy' classes the bootstrap grid is not working, I tried to create a component of a card and replicate it 4x with the col-6 class so that there were two at the top and two at the bottom, but they stay as column.

panel-simple component

 <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>

panel-simple.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() {
  }

}

abstract.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>

I don’t know if you can but I’m posting the code link on github https://github.com/dfealves/Dash-board-Angular for ease of understanding, I would like to understand what I am doing wrong, since the same code on an html page with bootstrap works smoothly.

Answer 1

I went to yours in yours package.json couldn’t find "bootstrap": "^4.3.1", so I added.

<div class="row">
  <app-painel-simples titulo="Consultas marcadas últimos 30 dias" class="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" class="col-6">
    <h3 class="text-center"> {{resumo.consultas.consultas_30dias_posteriores}} </h3>
  </app-painel-simples>
</div>

and on the panel-simple

<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>

the ideal would be to do so