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

Answer 1

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>