Search code examples
cssangularbootstrap-grid

How to center content generated by *ngFor in a bootstrap grid?

I would like to center some content in a row using the Bootstrap grid system. I have looked at many examples about this including this, but my example differs because of the use of a separate angular component to generate the content.

app.component.html:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
    <app-child-component></app-child-component>
  </div>
</div>

child-component.html:

<div *ngFor="let text of buttonText">
  <button mat-raised-button>{{text}}</button>
</div>

child-component.ts:

buttonText = ['Button1', 'Button2', 'Button3'];

This gives the result: enter image description here

But I would like all buttons to be horizonally aligned: enter image description here StackBlitz example: https://stackblitz.com/edit/github-t6uyxp-z6is8f?file=src%2Fapp%2Fchild-component%2Fchild-component.component.ts

Solution

  • Just add display: flex to the wrapper container:

    Better to add class instead of inline style. Inlining was done for demo only

    <div style="display:flex">
  <div *ngFor="let text of buttonText">
    <button mat-raised-button>{{text}}</button>
  </div>
</div>