Is there any way to prevent my bootsrap cards from getting nested by a django for loop?

Question

When I run this, it nests the cards within each other as such:

{% for task in tasks %}
<div class="card text-center">
  <div class="card-header">
    <h5 class="card-title">{{ task.name }}</h5>
  </div>
  
  <div class="card-body ">
    <h6 class="card-subtitle mb-2 text-muted"> Date due: {{ task.date }}. </h6>
    <p class="card-text"> {{ task.description }}</p>
  </div>

  {% empty %}
  
  <h4> Good to go!No tasks yet </h4>
</div>
<br/><br/> 
{% endfor %}

Answer 1

As isherwood rightly suggested, use spacing classes instead.

You can start with a min margin value such as m-2:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="card text-center m-2">
  <div class="card-header">
    <h5 class="card-title">{{ task.name }}</h5>
  </div>
  
  <div class="card-body ">
    <h6 class="card-subtitle mb-2 text-muted"> Date due: {{ task.date }}. </h6>
    <p class="card-text"> {{ task.description }}</p>
  </div>
</div>

<div class="card text-center m-2">
  <div class="card-header">
    <h5 class="card-title">{{ task.name }}</h5>
  </div>
  
  <div class="card-body ">
    <h6 class="card-subtitle mb-2 text-muted"> Date due: {{ task.date }}. </h6>
    <p class="card-text"> {{ task.description }}</p>
  </div>
</div>

This gives you a size 2 (1.5rem) margin on four sides. As shown in the Bootstrap docs, you can control all sides individually as needed.