ngFor Loop - Display over 2 Bootstrap columns

Question

I have an ngFor that loops over a list of roles that displays check boxes in a list in one column.

 

What I want to do is display this list over 2 columns.

 

I have the following code that prduces the single column list.

class="form-check" *ngFor="let role of roles">
      class="row">
        class="col-6">

            class="form-check-input"
            type="checkbox"
            value="role.name"
            [checked]="role.checked"
            (change)="role.checked = !role.checked && (supplier = true)"
            [disabled]="
              role.name === 'Administrator' && user.userName === 'Admin'"
          />
          {{ role.name }}

     

I tried removing the row div in the hope that the div with col-6 would place them side by side and then wrap to a new line but it didn't work.

 

Any help would be very much appreciated.