2

I have a bootstrap grid that contain an expand component.

My actual problem is that when I expand one column, the other columns get shifted because they are in the same row.

I would like to know How can I make column independs each one to another

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>

Here's what is happening

What I get

Here's what I expect

What I expect

Here's an example to illustrate my actual problem

infodev
  • 4,673
  • 17
  • 65
  • 138

1 Answers1

0

Is accordion what you need? Check this example, https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

T.Liu
  • 492
  • 1
  • 5
  • 16
  • No it's not what I'm looking for, I have updated my question with illustration you can check it – infodev Mar 05 '19 at 23:33
  • Could you add number to each block? – T.Liu Mar 06 '19 at 14:54
  • I have should the solution on desktop but now i have another problem on mobile look here you have a link to actual solution on desktop https://stackoverflow.com/questions/55025068/mobile-responsive-with-bootstrap-grid-and-expandable-columns – infodev Mar 06 '19 at 15:08