how to display a list in 3 columns

user_8526376 0
Viewed 115

I have a list that I am displaying using *ngFor vertically. I need to display this list on 3 columns;

I have tried to use d-flex flex-wrap but this didn't solve the problem. Also I set a fixed width for the div but this gave me a scrolling list.

Here is my code

<div class="d-flex flex-wrap container">
    <li *ngFor="let item of list">
       <input type="checkbox" [(ngModel)]="item.value" />
       <label> {{item.name}} </label>
    </li>
</div>

also I have tried to use ngFor on a div, thinking flex-wrap only works on divs but it gave me the same result

<div class="d-flex flex-wrap container">
    <div *ngFor="let item of list">
       <input type="checkbox" [(ngModel)]="item.value" />
       <label> {{item.name}} </label>
    </div>
</div>

enter image description here

css html
3 Answers

Use row to wrap DOM and col-3 to each div inside the wrap

AS below:

<div class="container row">
    <div *ngFor="let item of list" class="col-3">
       <input type="checkbox" [(ngModel)]="item.value" />
       <label> {{item.name}} </label>
    </div>
</div>

See example here

user_91407400 
<div class="row">
    <div *ngFor="let item of list" class="col-3">
       <input type="checkbox" [(ngModel)]="item.value" />
       <label> {{item.name}} </label>
    </div>
</div>
user_44981760

If you want 3 columns with bootstrap it's class col-4 you need (12 bootstrap columns / 3) on your div.

<div class="row">
    <div *ngFor="let item of list" class="col-4">
        <input type="checkbox" [(ngModel)]="item.value" />
        <label> {{item.name}} </label>
    </div>
</div>
user_141961910
Related