Aligning mat-spinner in bootstrap row

Question

I have a mat-spinner in a bootstrap row. I want to right align the mat-spinner in the row:

<div class="row">
  <div class="col-3">
    <div class="spinner-wrapper">
      <mat-spinner [diameter]="30" value="indeterminate">
      </mat-spinner>
    </div>
  </div>
</div>

I've tried following things individually on the spinner-wrapper class, but did not work:

margin: 0 auto;

text-align: right;

float: right;

None of these worked.

How can I right-align the mat-spinner?

Answer 1

You have to add this css properties to each element:

.spinner-wrapper{
   text-align:right;
}

mat-spinner{
   display:inline-block;
}

Hope it help.