Incorrect work of Angular and Bootstrap: columns stretched only by the size of the content

Question

    <div class="row">
        <div *ngFor="let column of columns">
            <div class="col">
                <div *ngFor="let cell of column">
                    ...cellcontent...
                </div>
            </div>
        </div>
    </div>

Here columns is a matrix (object[ ][ ]). I expect the columns to be the same and span the full width of the row, which is how bootstrap usually works.

That is, the columns are stretched only by the size of the content and do not occupy the entire row. Why does it work this way and how to achieve the correct behavior?

I definitely do not use styles that can break something here.

Answer 1

.col has to be a direct .row child to work fine.

The problem is that you are wrapping your .col divs with another div (with no .row class)

From your snippet

 <div class="row">
    <div *ngFor="let column of columns"> // This is the real column, but has no .col
        <div class="col">
            <div *ngFor="let cell of column">
                ...cellcontent...
            </div>
        </div>
    </div>
</div>

Try updating your code as follow:

<div class="row">
    <div *ngFor="let column of columns" class="col"> // *ngFor and .col class in the same div
        <div *ngFor="let cell of column">
            ...cellcontent...
        </div>
    </div>
</div>

Since you were putting your .col inside a non-flex div (the one with ne *ngFor), the .col style was ignored.

---

If you want to keep your *ngFor separated for any reason, you could do the following using ng-container instead of div (since is not actually rendered in the browser), to iterate your columns.

Like the following

<div class="row">
    <ng-container *ngFor="let column of columns"> // This will render only the children
        <div class="col">
            <div *ngFor="let cell of column">
                ...cellcontent...
            </div>
        </div>
    </ng-container>
</div>