Trying to lay out a variable number of cards per row with Django and Bootstrap

I have a variable number of items on Bootstrap cards that I will be laying out (maybe 100). I want to lay this out to put as many per row as will fit (let's assume fixed width).

On a larger screen, I should get

| 1 2 3 4 |

On a smaller one:

| 1 2 | | 3 4 |

I'm looping through the item with a for loop in a Django template.

Every method I've found assumes that the server will have a preset number of columns in the row. This makes no sense to me, as I want to set the with for readability (like 20em), and then put as many items per row that fit.

This is what I have, it doesn't work.

<div class="container-fluid">
    <div class="row">
        {% for person in people %}
            <div class="row">
                <div class="card width=25%">
                    <img class="teacher-pic card-img-top" style="float:left;  margin: 0 15px 0 0;"
                         src="{{ person.person_photo_url }}"/>
                    <div class="card-body">
                        <h5 class="card-title">{{ person.person_name }}</h5>
                        <p class="card-text">{{ person.person_description }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

Back to Top