How add space between two cards - bootstrap?

Question

I was creating a simple blog page using Django. When I added cards for the articles it came like this

There is no space between the cards.

{% extends 'base.html' %}
{% block content %}
    <div class="card mt-3" style="width: 100%;">
        {% for post in posts %}
            <div class="card-header">
                <cite title="Source Title">{{ post.author }}</cite>
                <small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
            </div>
            <div class="card-body">
                <div class="card-title">{{ post.title }}</div>
                <p class="card-text">{{ post.content }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock content %}

How do I add space between these cards?

Answer 1

your for loop is not in correct place change code from

{% extends 'base.html' %}
{% block content %}
    <div class="card mt-3" style="width: 100%;">
        {% for post in posts %}
            <div class="card-header">
                <cite title="Source Title">{{ post.author }}</cite>
                <small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
            </div>
            <div class="card-body">
                <div class="card-title">{{ post.title }}</div>
                <p class="card-text">{{ post.content }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock content %}

to bellow code

{% extends 'base.html' %}
{% block content %}
    {% for post in posts %}
 <div class="card mt-3" style="width: 100%;">
       
            <div class="card-header">
                <cite title="Source Title">{{ post.author }}</cite>
                <small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
            </div>
            <div class="card-body">
                <div class="card-title">{{ post.title }}</div>
                <p class="card-text">{{ post.content }}</p>
            </div>
        
    </div>
{% endfor %}
{% endblock content %}

Answer 2

Firstly, you need to do the loop for every card, instead of doing it for the inner divs 'card-header' and 'card-body'. Secondly, to answer you question, you should use a spacing by either a margin or a padding.

I would suggest to make the cards a standard width and use a 'margin right 3':

{% for post in posts %}
    <div class="card mt-3 mr-3" style="width: 250px">
        <div class="card-header">
            ...
        </div>
        <div class="card-body">
           ...
        </div>
    </div>
{% endfor %}

Besides this solution, I suggest you read the Bootstaps Grid Layout documentation , so you can place the cards nicely within your content block.