How to dynamically alter column width in bootstrap grid

Question

I want to place number of columns in a row dynamically. For example each student in students list should have one column. The width of the column should depend on number of students.

Any help is much appreciated.

Thanks Salman

score 0 · Answer 1 · answered Jul 15 '22 at 16:43

0

With bootstrap 5, you can just use the col class, and it will stretch to fill the space. Then you can set the min-width of the elements in CSS with media breakpoints to get it to wrap when you want.

<div class="col" *ngFor="let student of studentList"></div>

answered Jul 15 '22 at 16:43

z4nzib4r

81
6

Thanks @z4nzib4r I Should have mentioned I am using bootstrap 3 – Salman Jul 15 '22 at 16:52
In that case, you are stuck doing a bunch of if statements on ng-containers. – z4nzib4r Jul 15 '22 at 17:16

How to dynamically alter column width in bootstrap grid

1 Answers1