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

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