I am trying to center content in a row using the Bootstrap grid system. While I have checked out various examples, such as this one, my case is unique because I am utilizing a separate angular component for generating the content.
Here is the code snippet from 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>
The child component (child-component.html) looks like this:
<div *ngFor="let text of buttonText">
<button mat-raised-button>{{text}}</button>
</div>
And here's the TypeScript code for the child component (child-component.ts):
buttonText = ['Button1', 'Button2', 'Button3'];
Currently, the buttons are displayed vertically as shown in this result: https://i.sstatic.net/zanPT.png
However, I would like all the buttons to be horizontally aligned, similar to this image: https://i.sstatic.net/ygsQ5.png You can check out the StackBlitz example for reference: https://stackblitz.com/edit/github-t6uyxp-z6is8f?file=src%2Fapp%2Fchild-component%2Fchild-component.component.ts