how to apply flex to django template

Question

how to apply flex to django template I want to apply flex to Django and modify it as below

{% if object_list.exists %}
        {% for p in object_list %}
            <div class="d-flex flex-wrap">
                <div class="col-md-10"> <!-- sm,md,lg -->
                    <div class="card">
                        <div class="card-body">
                            <span class="card-title">{{p.title}}</span>
                            <a href="{% url 'challenge:lecinfo_list_for_challenge' p.title %}" class="btn btn-primary">go</a>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
{% else %}
    <tr>
        <td colspan="">
            <h4>no subject!</h4>
        </td>
    </tr>
{% endif %}

I want to change like this https://codepen.io/trufa/pen/rmwLzJ

Answer 1

Bootstrap would suffice for this. You would need a row tag <div class="row"> outside the {% for p in object_list %} and an inner <div class="col-sm-3">. you may want to see this

You would need to restructure your code to something like this. Read Grid options

{% if object_list.exists %}
<div class="row">
    {% for p in object_list %}
        <div class="d-flex flex-wrap">
            <div class="col-md-3"> <!-- sm,md,lg -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{p.title}}</h5>
                        <p class="card-text">{{p.description}}</p>
                        <a href="{% url 'challenge:lecinfo_list_for_challenge' p.title %}" class="btn btn-primary">go</a>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% else %}
    <tr>
        <td colspan="6">
            <h4>no subject!</h4>
        </td>
    </tr>
{% endif %}