-1

So, i have a for loop of items in flask and i'm trying to find a way to position them on the page.I have a forloop of tasks in bootstrap cards. When the user creates a card the card gets really goofy and the positioning gets really weird.

Screenshot:https://ibb.co/hRjCrFf(teachers home work one and new task)

HTML:

    {% for taskname in tasknames %}
    <div class="card" style="width: 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
      <h5 class="card-header border-bottom border-light" style="color: white" >{{ taskname[0] }}</h5>
      <div class="card-body" style="color: white" >
        <h5 class="card-title">{{ taskname[1] }}</h5>
        <p class="card-text">{{ taskname[2] }} </p>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
    </div>
    {% endfor %}

I tried using usual css and the position style. I expected it to position nicely, but i learned that if i position multiple items in a for loop at the same area it will be at the same spot as the others.

Can anyone help with this problem?

Note: I want them to position horizontially.

Avi Ball
  • 29
  • 6

1 Answers1

1

You should add a vertical gutter for that spacing between columns in different rows: gy-*

<div class="row row-cols-auto gy-3"> <!-- Added: gy-3 -->
 ... columns
</div>
Kostas Minaidis
  • 4,681
  • 3
  • 17
  • 25