I am currently developing a Flask project where I'm showcasing user information retrieved from the database within bootstrap cards. Utilizing jinja2 to iterate through an object statuses
{% extends "base.html" %}
{% block content %}
{% if statuses %}
**{% for status in statuses %}**
<div class="container">
<div class="row mt-4">
<div class="col-sm-3">
<div class="card">
<img src="{{ url_for('static', filename='img/no_profile.jpg')}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ status.username }}</h5>
<p class="card-text">{{ status.biography }}</p>
<a href="#" class="btn btn-primary">{{ status.interests }}</a></div>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<h2>There are no statuses</h2>
{% endif %}
{% endblock %}
Yet, my expectation was for the cards to align side by side instead of stacking up for each entry fetched from the database view the snapshot here