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.

Michael Seery · Answer

I just figured it out. I needed to move the ngFor loop from the form-check div to the col-6 div div class = "form-check" > div class = "row" > div class = "col-6" * ngFor = "let role of availableRoles" > input class = "form-check-input" type = "checkbox" value = "role.name" [checked]="role.checked" /> label > {{ role.name }} label > div > div > div >

Michael Seery · Answer

Hi Jay, What changes did you make to my code? I just noticed that the opening DIV tags are missing on my post. div class = "form-check" * ngFor = "let role of roles" > div class = "row" > div class = "col-6" > input class = "form-check-input" type = "checkbox" value = "role.name" [checked]="role.checked" /> label > {{ role.name }} label > div > div > div >

Jay Krishna Reddy · Answer

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) && (Buyer = true)" [disabled]=" role.name === 'Administrator' && user.userName === 'Admin' " /> {{ role.name }}