How to make bootstrap 4 column height the same as row height

Question

I've created this layout in Angular 9 using Bootstrap 4's row and column classes. The charts are created by the Chart.js library.

For some reason I can't get the columns in each row to be of the same height, so I've come here for help.

Layout Markup

 <div class="container mb-2">
    <div class="row" *ngFor="let row of rows">
      <div [ngClass]="{'col': component.cols == 4, 'col-9': component.cols == 3, 'col-6': component.cols == 2, 'col-3': component.cols == 1}" *ngFor="let component of row">
        <app-chart></app-chart>
      </div>
    </div>
 </div>

Component Markup

<div class="container-fluid my-1 component-shadow rounded-lg">
  <div class="row border">
    <div class="col pt-1">
      <div class="h5 text-center">Some Chart</div>
    </div>
  </div>
  <div class="row border-left border-right border-bottom">
    <div class="col py-2">
      <canvas
      baseChart
        width="400"
        height="200"
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [chartType]="chartType"
      >
      </canvas>
    </div>
  </div>
</div>

The column classes are determined by the conditions in *ngClass

score 1 · Answer 1 · answered Mar 20 '20 at 08:52

1

Can you please check with below css, hope it will work for you.

.row { display : flex; flex-wrap :wrap; }

answered Mar 20 '20 at 08:52

Yudiz Solutions

4,216
2
7
21

1

Thanks. I'll try that. But I think my major issue was the fact that the maintainAspectRatio: true on the chart forced the column to a specific size. – Johannes Karsten Mar 20 '20 at 09:00

score 0 · Answer 2 · answered Mar 20 '20 at 08:47

0

Nevermind. All I had to do is to set the maintainAspectRatio of the chart in ChartOptions to false.

answered Mar 20 '20 at 08:47

Johannes Karsten

69
1
10

How to make bootstrap 4 column height the same as row height

2 Answers2