I am currently working with a bootstrap grid that includes an expand component.
The issue I am facing is that when I expand one column, the other columns in the same row also shift.
Is there a way to make each column independent of the others?
expand component
<p>
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Toggle
</button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div >
<div class="">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
app component ( container )
<div class="row">
<div *ngFor="let card of cards; let index=index" class="col-4 col-sm-4 col-xl-4">
<app-expend></app-expend>
</div>
</div>
This is the current behavior:
https://i.sstatic.net/hnfoy.png
This is the expected behavior:
https://i.sstatic.net/lq2c4.png
Here's an example that demonstrates the issue I am facing