Bootstrap Grid System does not work inside mat-expansion-panel

Question

When using the Boostrap 4 grid system inside the Angular/Material mat-expansion-panel, the grid elements do not fit into the grid. All elements in a row do not fit and the last element carries over to a new line.

Answer 1

for all elements in a row, obviously have col-* class, add this style:

col-* {  box-sizing: border-box;}

Answer 2

The Bootstrap grid system expects all elements to have the box-sizing set to border-box. To fix this just add the following css to your page.

.mat-expansion-panel{
    box-sizing: border-box;
}