Search code examples
cssbootstrap-4bootstrap-grid

Centre buttons within bootstrap grid column when using angular *ngFor

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

enter image description here The result I'm looking for is

enter image description here

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

Solution

  • 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>