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

z4nzib4r · Accepted Answer · 2022-07-15 16:43:51Z

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, 2022 at 16:43

z4nzib4r

816 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Salman Over a year ago

Thanks @z4nzib4r I Should have mentioned I am using bootstrap 3

z4nzib4r Over a year ago

In that case, you are stuck doing a bunch of if statements on ng-containers.

Collectives™ on Stack Overflow

How to dynamically alter column width in bootstrap grid

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related