Centre buttons within bootstrap grid column when using angular *ngFor

Question

I am using the bootstrap 4 grid system to display some buttons. I would like to horizontally center the buttons WITHIN a column - here the column with the green border. So far all attempts at justify-content-center have failed.

<div class="row" style="border:1px solid red;">
  <div class="col">
    <button mat-raised-button>text</button>
    <div *ngFor="let text of buttonText">
      <button mat-raised-button>text</button>
    </div>
  </div>
</div>

This example gives the result

The result I'm looking for is

Same example on Stackblitz: https://stackblitz.com/edit/github-t6uyxp-z6is8f?file=src/app/app.component.html

I can't add an answer now the question has been closed, but my issue was specifically to do with an *ngFor loop - https://stackoverflow.com/a/62550464/4440629 — Fletch, Jun 24 '20 at 08:58

score 0 · Accepted Answer · answered Jun 22 '20 at 14:53

0

Bootstrap have a class text-center which is going to fulful your need.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



<div class="row">
  <div class="col-2">
    <span>some text</span>
  </div>
  <div class="col-8 text-center" style="border:1px solid green;">
    <button mat-raised-button>I am a button</button>
    <button mat-raised-button>I am a button</button>
    <button mat-raised-button>I am a button</button>
  </div>
</div>

answered Jun 22 '20 at 14:53

Fareed Khan

2,613
1
11
19

Thanks for the answer - it works perfectly in the code snippet but why won't it work in my StackBlitz example? – Fletch Jun 22 '20 at 14:59
1

The reason is because in your `style.scss` file you are only `importing` few components of bootstrap instead of those you can simply import complete `css` using `@import "~bootstrap/dist/css/bootstrap.css";` then the above code will work! – Fareed Khan Jun 22 '20 at 15:24

score 0 · Answer 2 · answered Jun 22 '20 at 14:54

There are many different ways. One way is to use the flexbox utils...

<div class="row">
  <div class="col-2">
    <span>some text</span>
  </div>
  <div class="col-8 d-flex justify-content-center" style="border:1px solid green;">
    <button mat-raised-button>I am a button</button>
    <button mat-raised-button>I am a button</button>
  </div>
</div>

Centre buttons within bootstrap grid column when using angular *ngFor

2 Answers2